/*
 * Homepage hero scale adjustment.
 *
 * This layer is intentionally homepage-only. Internal page heroes keep the
 * stable geometry from 84-hero-restored.css.
 */

:root {
    --copp-home-hero-height: 440px;
    --copp-home-hero-people-width: min(88%, 560px);
}

@media (min-width: 768px) {
    html body :is(
        .copp-hero,
        .copp-hero__slides,
        .copp-hero__track,
        .copp-hero__slide,
        .copp-hero__inner
    ) {
        box-sizing: border-box !important;
        height: var(--copp-home-hero-height) !important;
        max-height: var(--copp-home-hero-height) !important;
        min-height: var(--copp-home-hero-height) !important;
    }

    html body .copp-hero__inner {
        align-items: stretch !important;
        padding: 24px clamp(28px, 7vw, 108px) 0 !important;
    }

    html body .copp-hero__visual,
    html body .copp-hero__visual > .copp-visual {
        align-self: stretch !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    html body .copp-hero__people {
        bottom: 0 !important;
        height: calc(100% + 16px) !important;
        right: -20px !important;
        transform: none !important;
        width: var(--copp-home-hero-people-width) !important;
    }

    html body .copp-hero__people img {
        height: auto !important;
        max-width: none !important;
        object-fit: contain !important;
        object-position: center bottom !important;
        width: 100% !important;
    }
}

@media (max-width: 767.98px) {
    html body :is(
        .copp-hero,
        .copp-hero__slides,
        .copp-hero__track,
        .copp-hero__slide,
        .copp-hero__inner
    ) {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }
}