/* =========================================================
   BLUMI
   Child Products Grid
   ========================================================= */


.blumi-child-products-grid {

	width: 100%;

	padding:clamp(60px, 7vw, 0) var(--blumi-gutter);

	background:
		#ECEFFA;

	color:
		var(--blumi-cocoa);

}


/* ---------------------------------------------------------
   Container
   --------------------------------------------------------- */

.blumi-child-products-grid__inner {

	width: 100%;

	max-width:
		var(--blumi-container);

	margin:
		0 auto;

}


/* ---------------------------------------------------------
   Grid
   --------------------------------------------------------- */

.blumi-child-products-grid__grid {

	display: grid;

	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		);

	column-gap:
		clamp(18px, 2vw, 32px);

	row-gap:
		clamp(55px, 7vw, 100px);

}


/*
 * Il widget correlati nasce per uno slider.
 *
 * Qui annulliamo eventuali width / flex-basis
 * della card perché ora è una cella CSS Grid.
 */

.blumi-child-products-grid__card {

	width: auto !important;

	min-width: 0 !important;

	max-width: none !important;

	flex: none !important;

	margin: 0 !important;

}


/* ---------------------------------------------------------
   Image
   --------------------------------------------------------- */

.blumi-child-products-grid
.blumi-related-solutions__image {

	display: block;

	width: 100%;

	overflow: hidden;

}


.blumi-child-products-grid
.blumi-related-solutions__image img {

	display: block;

	width: 100%;

	height: auto;

}


/* ---------------------------------------------------------
   Placeholder
   --------------------------------------------------------- */

.blumi-child-products-grid__placeholder {

	display: block;

	width: 100%;

	aspect-ratio:
		4 / 5;

	background:
		rgba(
			165,
			173,
			216,
			.15
		);

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

	.blumi-child-products-grid__grid {

		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);

	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.blumi-child-products-grid {

		padding:
			50px
			var(--blumi-gutter)
			70px;

	}


	/*
	 * Nel wireframe mobile manteniamo
	 * le card affiancate 2 a 2.
	 */

	.blumi-child-products-grid__grid {

		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);

		column-gap:
			14px;

		row-gap:
			48px;

	}


	.blumi-child-products-grid
	.blumi-related-solutions__card-title {

		font-size:
			clamp(
				18px,
				5.2vw,
				24px
			);

	}


	.blumi-child-products-grid
	.blumi-related-solutions__cta {

		font-size:
			13px;

	}

}


/* ---------------------------------------------------------
   Mobile molto stretto
   --------------------------------------------------------- */

@media (max-width: 420px) {

	.blumi-child-products-grid__grid {

		column-gap:
			12px;

	}

}