.vls.v12 {
	--vls-v12-bdg-ovr-clc: 2.5rem;
	--vls-v12-bdg-pd-clc: calc(var(--sp-qk) * 1.5);
}

.vls.v12 .vls-v12-bdg {
	position: absolute;
	left: 0;
	/* Clears the photo's burned-in LANDMARK mark, which fills roughly the bottom 13% of the
	   frame (bottom-right), so the badge no longer covers it. */
	bottom: calc(14% + 1rem);
	max-width: 100%;
	padding-inline: var(--vls-v12-bdg-pd-clc);
}

/* 1280px Responsive (min-width) */
@media screen and (min-width: 1280px) {

	.vls.v12 .vls-v12-bdg {
		left: calc(var(--vls-v12-bdg-ovr-clc) * -1);
		max-width: calc(100% + var(--vls-v12-bdg-ovr-clc));
	}

	/* The feature grid lives in a flex column whose inline size the container
	   query cannot resolve; pin the two-up layout the design evidences. */
	.vls.v12 .grd.mx-2 {
		--itm-val: 50;
	}

}

/* Landmark design (Figma 18723:21850, local service child): a 1600px #212121 panel with 64px padding
   and a 64px column gap; the photo column is 480px; feature icons 75px beside Title 4 headings. */
.vls.v12 {
	--vls-v12-pnl-pd: 4rem;
	--vls-v12-img-w: 30rem;            /* 480px */

	> .mn_wd {
		max-width: var(--mn_max);
	}

	> .mn_wd > [data-colors] {
		padding: var(--vls-v12-pnl-pd);

		> .flx-at-1280 {
			column-gap: var(--vls-v12-pnl-pd);
		}
	}

	/* The photo's burned-in LANDMARK mark (bottom-right corner) stays visible (client request
	   2026-10-14): no zoom, and any crop is taken from the top/left so that corner is kept. */
	.third picture img {
		object-fit: cover;
		object-position: 100% 100%;
	}

	.vls-icn :is(svg, img) {
		width: 4.6875rem;
		height: auto;
	}

	@media screen and (width >= 1280px) {
		.third {
			flex: 0 0 var(--vls-v12-img-w);
			width: var(--vls-v12-img-w);
		}

		.two-thirds {
			flex: 1 1 0;
			width: auto;
			min-width: 0;
		}
	}

	@media screen and (width < 1280px) {
		> .mn_wd > [data-colors] {
			padding: 2rem 1.5rem;
		}
	}
}