@use 'shared/ui/container';
@use 'shared/ui/stack';
@use 'shared/ui/carousel';

.reviews-tape{
	overflow: hidden;
	.review-carousel{
		overflow: visible;
	}
}

.review-carousel{	

	@media (min-width: 768px){
		--slide-count: 2;
	}

	@media (min-width: 992px){
		--slide-count: 3;
	}

}

/*
.review-carousel{

	&:not(.swiper-initialized),
	&:not(.carousel_js_inited){

		--slide-count: 1;

		container-name: carousel;
		container-type: inline-size;

		.review-carousel__slide{
			flex-basis: calc(100cqw / var(--slide-count));
			// width: calc(100cqw / var(--slide-count));
			// margin-right: 20px;
		}

		.carousel__viewport{
			gap: 20px;
		}
		// :not(.swiper-initialized)

		@media (min-width: 768px){
			--slide-count: 2;
		}

		@media (min-width: 992px){
			--slide-count: 3;
		}
		
	}

	.review-carousel__slide{
		height: auto;
	}

	&.carousel_with-dots{
		position: relative;
		padding-bottom: 54px;
	}

	.carousel__controls{

		@include stack.layout;

		--gap: var(--grid-gap, 32px);

		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		align-items: center;
		// background-color: rgba(255,255,255,.4);
	}

	.carousel__pagination{
		position: static;
		flex-grow: 1;
	}

	.carousel__navigation{
		@include stack.layout;
		--gap: 12px;
		color: #333;
	}

	.carousel__button{
		position: static;
	}

}*/