/**
 * Final local visual remediation after the sitewide icon audit.
 * Version stays 1.6.4-rc1 until the local review is approved.
 */

/* The three approved XXL pictograms are a separate illustrative hero layer. */
.cpt-v164-hero-visual {
	width: clamp(130px, 40vw, 160px) !important;
	max-width: none !important;
	margin: 30px auto 0 !important;
}

.cpt-v164-hero-visual img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 961px) {
	.cpsk-site:is(
		.cpsk-page--about,
		.cpsk-page--en-about,
		.cpsk-page--quality,
		.cpsk-page--en-quality,
		.cpsk-page--contact,
		.cpsk-page--en-contact
	) .cpsk-v7-section--hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
		align-items: center;
		column-gap: clamp(56px, 6vw, 88px);
	}

	.cpsk-site:is(
		.cpsk-page--about,
		.cpsk-page--en-about,
		.cpsk-page--quality,
		.cpsk-page--en-quality,
		.cpsk-page--contact,
		.cpsk-page--en-contact
	) .cpsk-v7-section--hero .cpsk-v7-hero__copy-column {
		width: 100% !important;
		max-width: 920px !important;
	}

	.cpsk-site:is(
		.cpsk-page--about,
		.cpsk-page--en-about,
		.cpsk-page--quality,
		.cpsk-page--en-quality,
		.cpsk-page--contact,
		.cpsk-page--en-contact
	) .cpsk-v7-section--hero .cpsk-v7-hero__copy-column > * {
		max-width: 820px !important;
	}

	.cpsk-site:is(.cpsk-page--contact, .cpsk-page--en-contact)
		.cpsk-v7-section--hero .cpsk-v7-hero__copy-column > * {
		max-width: 880px !important;
	}

	.cpt-v164-hero-visual {
		width: clamp(180px, 15vw, 220px) !important;
		justify-self: center;
		margin: 0 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cpt-v164-hero-visual,
	.cpt-v164-hero-visual img {
		animation: none !important;
		transform: none !important;
		transition: none !important;
	}
}