@layer components {
.gallery {
	display: flex;
	flex-flow: row wrap;
	gap: var(--gutter);
}

.gallery[class*="cols-"] > * {
	flex: 0 0 auto;
}

.gallery.cols-0 > *,
.gallery.cols-1 > * {
	flex: 0 0 100%;
}

.gallery.cols-2 > * {
	flex: 0 0 calc((100% - var(--gutter) * 1) / 2);
}
.gallery.cols-3 > * {
	flex: 0 0 calc((100% - var(--gutter) * 2) / 3);
}
.gallery.cols-4 > * {
	flex: 0 0 calc((100% - var(--gutter) * 3) / 4);
}

.gallery.flow-intext {
	align-items: center;
}

.gallery.inline-center {
	justify-content: center;
}

.gallery.inline-start,
.gallery.inline-left {
	justify-content: start;
}

.gallery.inline-end,
.gallery.inline-right {
	justify-content: end;
}

.text-gallery {
	display: flex;
	grid-gap: var(--gutter);
}

.text-gallery.flow-intext {
	flex-wrap: wrap;
}

.text-gallery.flow-intext.align-left {
	flex-direction: row;
}
.text-gallery.flow-intext.align-right {
	flex-direction: row-reverse;
}

.text-gallery.flow-intext > .gallery {
	flex: 1 0 calc(25% - var(--gutter) / 2);
	min-inline-size: calc(var(--content-min) * 2 / 5);
}

.text-gallery.flow-intext > .bodytext {
	flex: 1 1 calc(75% - var(--gutter) / 2);
	min-inline-size: var(--content-min);
}

}