/** @format */

.text_gallery-image {
	display: flex;
	align-self: center;
}

.text_gallery-image .single_item {
	width: 100%;
	object-fit: contain;
}

.text_gallery-text {
	align-self: center;
}

/* Slider */

.text_gallery-gallery {
	width: 100%;
	display: flex;
	position: relative;
	align-self: center;
}

.text_gallery_slider_container {
	overflow: auto;
	width: 100%;
	scroll-snap-type: x mandatory;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.text_gallery_slider_container::-webkit-scrollbar {
	display: none;
}

.text_gallery_gallery_stage {
	display: flex;
	height: 100%;
	gap: 0;
}

.text_gallery_slider_item {
	scroll-snap-align: start;
	display: grid;
	grid-template: 'container';
	height: fit-content;
}

.text_gallery_slider_item img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	grid-area: 1 / 1;
	margin: 0;
}
.text_gallery_slider_item_caption {
	display: inline-block;
	color: var(--color-white);
	grid-area: 1 / 1;
	text-align: left;
	width: 100%;
	place-self: end;
	backdrop-filter: brightness(50%);
	padding: calc(var(--universal-gap) / 2) var(--universal-gap);
	font-size: var(--fs-3);
	line-height: 1.2;
	overflow: auto;
	max-height: 100%;
}
.text_gallery_slider_arrow {
	opacity: 0;
	display: flex;
	border-radius: 50%;
	background-color: var(--color-white);
	color: var(--color-black);
	cursor: pointer;
	width: calc(2 * min(var(--wrapper-padding), 1.5rem));
	height: auto;
	aspect-ratio: 1 / 1;
	align-items: center;
	justify-content: space-around;
}

.text_gallery_slider_controls_container {
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	pointer-events: none;
	justify-content: space-between;
	font-family: var(--ff-icon-font);
}
.text_gallery_slider_arrow__left {
	transform: translateX(-50%);
}
.text_gallery_slider_arrow__left.active {
	opacity: 1;
	pointer-events: auto;
}
.text_gallery_slider_arrow__left::after {
	content: var(--arrow-left);
}
.text_gallery_slider_arrow__right {
	transform: translateX(50%);
}
.text_gallery_slider_arrow__right.active {
	opacity: 1;
	pointer-events: auto;
}
.text_gallery_slider_arrow__right::after {
	content: var(--arrow-right);
}