/* ==========================================================================
   MMX / IMAGE ACROSS
   ========================================================================== */

/* Base Styles for the new non-web-component version */
.pci-mmx-image-across {
	display: block;
	text-align: center;
}

.pci-mmx-image-across__title {
	margin: 0 auto 3%;
}


.pci-mmx-image-across__images {
	--mmx-image-across__gap: clamp(16px, calc(8vw / 3), 32px);
	display: grid;
	gap: var(--mmx-image-across__gap);
	/* Base grid setup: minimum 2 columns, maximum 6 columns */
	grid-template-columns: repeat(auto-fit, minmax(min(calc(100% / 3), 175px), 1fr));
}

/* Item wrapper styles */
.pci-mmx-image-across__item {
	width: 100%;
	height: auto;
	min-height: 100%;
}


/* Desktop and Tablet */
@media screen and (min-width: 40em) and (max-width: 80em) {
	.pci-mmx-image-across__images {
		/* On regular desktop, limit to max 4 columns */
		grid-template-columns: repeat(auto-fit, minmax(calc(100% / 4), 1fr));
	}
}

/* Mobile */
@media screen and (max-width: 40em) {
	.pci-mmx-image-across__images {
		/* On mobile, always display 2 columns */
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Responsive Heights for Mobile */
.pci-mmx-image-across {
	--mmx-hero--size--l: 240px;
	--mmx-hero--size--m: 180px;
	--mmx-hero--size--s: 160px;
}

/* Responsive Heights for Tablet */
@media screen and (min-width: 48em) {
	.pci-mmx-image-across {
		--mmx-hero--size--l: 400px;
		--mmx-hero--size--m: 240px;
		--mmx-hero--size--s: 200px;
	}
}

/* Responsive Heights for Desktop */
@media screen and (min-width: 75em) {
	.pci-mmx-image-across {
		--mmx-hero--size--l: 640px;
		--mmx-hero--size--m: 400px;
		--mmx-hero--size--s: 240px;
	}
}