/* ==========================================================
GALERIE DE LA FICHE PRODUIT
Base
========================================================== */

.cs3-single-product-gallery {
	width: 100%;
}

.cs3-single-product-gallery__figure {
	margin: 0;

	aspect-ratio: 400 / 489;

	overflow: hidden;
	background-color: var(--couleur-bg, #f5f5f5);
	
	border-radius: 4px;
}

.cs3-single-product-gallery__image {
	display: block;

	width: 100% !important;
	height: 100% !important;

	object-fit: cover !important;
}


/* ==========================================================
DESKTOP
Grille de deux colonnes
========================================================== */

@media all and (min-width: 769px) {
	
		.cs3-single-product-gallery.splide {
		visibility: visible;
	}

	.cs3-single-product-gallery
	.splide__track {
		overflow: visible;
	}

	.cs3-single-product-gallery
	.splide__list {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;

		height: auto !important;

		transform: none !important;
	}

	.cs3-single-product-gallery
	.splide__slide {
		width: auto !important;
		margin: 0 !important;
	}

	.cs3-single-product-gallery
	.splide__arrows,
	.cs3-single-product-gallery
	.splide__pagination {
		display: none !important;
	}

}


/* ==========================================================
MOBILE
Slider d'une image
========================================================== */

@media all and (max-width: 768px) {

	.cs3-single-product-gallery
	.splide__track {
		overflow: hidden;
	}

	.cs3-single-product-gallery
	.splide__list {
		display: flex !important;
		gap: 0;
	}

	.cs3-single-product-gallery
	.splide__slide {
		width: 100%;
	}
}