@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);
}

.text-gallery.media-inline-start {
	flex-direction: row;
	align-items: start;
}
.text-gallery.media-inline-end {
	flex-direction: row-reverse;
	align-items: end;
}
.text-gallery.media-inline-center {
	align-items: center;
}
.text-gallery.media-block-start {
	flex-direction: column;
	align-items: start;
}
.text-gallery.media-block-end {
	flex-direction: column;
	align-items: start;
}
.text-gallery.media-block-center {
	align-items: center;
}

.gallery {
	inline-size: 100%;
}

.gallery:has(> .video) {
	aspect-ratio: 16 / 9;
	inline-size: 100%;
}

.gallery:has(> .video) :where(.video-embed, .video-embed > *) {
	inline-size: 100% !important;
	block-size: 100% !important;
}

.text-gallery.media-block-float {
	display: block;
}
.text-gallery.media-block-float .gallery {
	inline-size: 100%;
	max-inline-size: 40%;
}
.text-gallery.media-inline-start.media-block-float .gallery:not(:only-child) {
	float: left;
	margin-inline-end: calc(var(--gutter) / 2);
	margin-block-end: calc(var(--gutter) / 2);
}
.text-gallery.media-inline-end.media-block-float .gallery:not(:only-child) {
	float: right;
	margin-inline-start: calc(var(--gutter) / 2);
	margin-block-end: calc(var(--gutter) / 2);
}

}