/*
 * Image Text Carousel block (Swiper version, mobile only).
 * Desktop (min-width 769px) shows the .desktop4ColumnCarousel grid; below
 * that the grid is hidden and the Swiper carousel takes over with one slide
 * per view (see shared/assets/js/image-text-carousel.js).
 */

.image-text-carousel {
	position: relative;
	padding-bottom: 62px;
}

.image-text-carousel .swiper-slide {
	height: auto;
}

.image-text-carousel .descriptionWrp {
	text-align: left;
	margin-bottom: 20px;
}

.image-text-carousel .descriptionWrp img {
	width: 100%;
	height: inherit;
}

.image-text-carousel .descriptionWrp p {
	max-width: 90%;
}

.image-text-carousel a.findOutMoreLink {
	display: inline-block;
	width: inherit;
	margin-bottom: 20px;
}

/* Navigation buttons — same styling as the other theme carousels,
   pinned to the bottom right as before */
.image-text-carousel .carouselLeftBtn.ds-c-button--icon.ds-c-button--sr-only,
.image-text-carousel .carouselRightBtn.ds-c-button--icon.ds-c-button--sr-only {
	width: 42px;
	height: 42px;
	background-color: var(--ds-color-alias-cta-scheme-brand-1-secondary-default-border);
	color: white;
	position: absolute;
	bottom: 0;
	right: 10px;
}

.image-text-carousel .carouselLeftBtn.ds-c-button--icon.ds-c-button--sr-only {
	right: 60px;
}

.image-text-carousel .swiper-button-disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* Desktop grid / mobile carousel switch (was carousel-columns4-mobile-mode.css) */
@media (min-width: 769px) {
	.image-text-carousel {
		display: none;
	}
}

@media (max-width: 768px) {
	.desktop4ColumnCarousel {
		display: none;
	}
}