.hero-art {
    display: grid;
    min-height: 650px;
    place-items: center;
}

.hero-art::before {
    position: absolute;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 45% 55% 62% 38%;
    background: rgba(233, 95, 79, .12);
    content: '';
    transform: translate(11%, 4%) rotate(-8deg);
}

.hero-photo {
    position: relative;
    inset: auto;
    z-index: 1;
    display: grid;
    width: min(100%, 445px);
    aspect-ratio: 1066 / 1600;
    place-items: end center;
    overflow: hidden;
    padding: 0;
    border: 9px solid #fff;
    border-radius: 34px 34px 110px 34px;
    outline: 1px solid rgba(233, 95, 79, .24);
    outline-offset: 7px;
    background: #f8d9ca;
    box-shadow: 0 30px 75px rgba(23, 43, 53, .18);
}

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

@media (max-width: 800px) {
    .hero-art { min-height: 620px; }

    .hero-photo { width: min(88vw, 420px); }

    .hero-photo img {
        width: 100% !important;
        height: 100% !important;
    }
}

@media (max-width: 560px) {
    .hero-art { min-height: 550px; }

    .hero-photo { width: min(86vw, 365px); border-width: 7px; border-radius: 26px 26px 82px 26px; outline-offset: 5px; }

    .hero-photo img {
        width: 100% !important;
        height: 100% !important;
    }
}

@media (max-width: 360px) {
    .hero-art { min-height: 490px; }
    .hero-photo { width: min(84vw, 320px); }
}