/* Figma 8:561: full-bleed grey band whose top line runs through the centre of the
   first unit image and bottom line through the centre of the enquiry panel (positions
   set by alignGrey() in main.js; the fallbacks match the ~1920 artboard proportions). */
.base-units-band { position: relative; }
.base-units-band > .base-container { position: relative; z-index: 1; }
.base-units-band::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	top: var(--base-grey-top, 200px);
	bottom: 0;
	background: var(--color-bg-subtle);
	border-top: 1px solid var(--color-body);
	z-index: -1;
}
/* If the client chooses a Background preset for this section, the .base-band wrapper takes
   over — hide the bespoke line-through-images band so they don't stack. */
.base-band .base-units-band::before { display: none; }

.base-units { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.base-unit { text-align: center; }
.base-unit__img { aspect-ratio: 4 / 3; border-radius: var(--radius); background-size: cover; background-position: center; background-color: #dbe3ea; }
.base-unit h3 { color: var(--color-primary); font-size: var(--text-lg); font-weight: var(--fw-bold); margin: 18px 0 2px; }
.base-unit__status { color: var(--color-secondary); font-size: var(--text-md); margin: 0; }
.base-unit__status--unavailable { color: var(--color-secondary); }
.base-unit__size { color: var(--color-secondary); font-size: var(--text-md); margin: 0 0 12px; }
.base-unit__more { color: var(--color-primary); font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
.base-unit__more:hover { color: var(--color-secondary); }

@container (max-width: 944px) {
	.base-units { grid-template-columns: repeat(2, 1fr); }
}
@container (max-width: 512px) {
	.base-units { grid-template-columns: 1fr; }
}