.promo-carousel {
	overflow: hidden;
}

.swiper-carousel-promos {
	padding-right: 10px !important;
	overflow: unset !important;
}

.swiper-carousel-promos .tile {
	height: 100%;
}

.swiper-carousel-tctn.swiper-carousel-promos .swiper-slide {
	overflow: unset;
}

@media (max-width: 767px) {
	.promo-carousel {
		margin-left: -20px;
		margin-right: -20px;
	}

	.swiper-carousel-promos {
		margin: 0 20px !important;
	}

	.swiper-carousel-promos .tile {
		min-height: 250px;
	}

	.swiper-carousel-promos .swiper-button-tectn {
		display: none;
	}

	.swiper-carousel-promos .swiper-pagination {
		width: calc(100% + 10px);
	}
}

@media (min-width: 768px) {
	.swiper-carousel-promos {
		padding-right: 80px !important;
	}
}

@media (min-width: 1125px) {
	.promo-carousel.count-3 .swiper-carousel-promos {
		padding-right: 0 !important;
	}
}

/*set slide width*/
/*this should be the same as in the js*/
/*we're setting it here for loading purposes, so carousel loads fine as much as possible while js and other assets load*/

.swiper-carousel-promos:not(.swiper-initialized) .swiper-wrapper {
	column-gap: 10px;
}

.swiper-carousel-promos:not(.swiper-initialized) .swiper-button-tectn {
	display: none;
}

.swiper-carousel-promos .swiper-wrapper .swiper-slide img[src*="base64"] {
	height: 0;
}

@media (min-width: 768px) {
	.swiper-carousel-promos:not(.swiper-initialized) .swiper-wrapper {
		column-gap: 20px;
	}

	.swiper-carousel-promos:not(.swiper-initialized) .swiper-wrapper .swiper-slide {
		flex: 0 0 calc(100% / 2 - (40px / 2));
	}
}

@media (min-width: 1125px) {
	.swiper-carousel-promos:not(.swiper-initialized) .swiper-wrapper .swiper-slide {
		flex: 0 0 calc(100% / 3 - (40px / 3));
	}
}