@media (min-width: 769px) {
    .hero {
        min-height: 850px;
        padding: 128px 0 72px;
    }

    .hero-grid {
        width: min(1320px, calc(100% - 64px));
        grid-template-columns: minmax(0, .94fr) minmax(420px, 1.06fr);
        gap: clamp(55px, 7vw, 110px);
        align-items: center;
    }

    .hero-copy {
        width: 100%;
        max-width: 680px;
        margin: 0;
        justify-self: start;
        text-align: left;
    }

    .hero .kicker {
        justify-content: flex-start;
        text-align: left;
    }

    .hero h1,
    .hero-lead {
        margin-left: 0;
        text-align: left;
    }

    .hero-actions {
        justify-content: flex-start;
    }

    .hero-art {
        display: grid;
        width: 100%;
        min-height: 700px;
        place-items: center end;
        justify-self: stretch;
    }

    .hero-photo {
        width: clamp(410px, 38vw, 500px);
        max-width: 100%;
        aspect-ratio: 1066 / 1600;
        margin: 0;
        border: 0;
        border-radius: 30px;
        background: #f4d4c5;
        box-shadow: 0 32px 75px rgba(23, 43, 53, .17);
    }

    .hero-photo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center bottom !important;
    }
}

@media (min-width: 769px) and (max-width: 1050px) {
    .hero {
        min-height: 760px;
    }

    .hero-grid {
        width: calc(100% - 48px);
        grid-template-columns: minmax(0, 1fr) minmax(350px, .9fr);
        gap: 38px;
    }

    .hero h1 {
        font-size: clamp(50px, 6vw, 66px);
    }

    .hero-art {
        min-height: 590px;
    }

    .hero-photo {
        width: min(100%, 390px);
    }
}