.hero {
    position: relative;
    isolation: isolate;
    min-height: 650px;
    padding: 54px 24px 34px;
    grid-template-columns: minmax(370px, .76fr) minmax(640px, 1.24fr);
    gap: 10px;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(circle at 66% 42%, rgba(255, 255, 255, .96), transparent 29rem),
        linear-gradient(105deg, #eaf7ff 0%, #eef9ff 47%, #dcefff 100%);
}

.hero > div:first-child {
    position: relative;
    z-index: 3;
}

.hero h1 {
    font-size: clamp(3.15rem, 4.7vw, 4.85rem);
    letter-spacing: -.065em;
    white-space: nowrap;
}

.hero h1 span,
.brand b {
    color: #7d8794;
}

.art {
    min-height: 530px;
    margin-right: -4vw;
    overflow: visible;
}

.art > .asset-hero-scene {
    position: relative;
    z-index: 1;
    width: 112%;
    height: auto;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 100%);
}

@media (max-width: 1200px) {
    .hero {
        grid-template-columns: minmax(330px, .8fr) minmax(520px, 1.2fr);
    }

    .hero h1 {
        font-size: clamp(3rem, 4.5vw, 4.15rem);
    }
}

@media (max-width: 1050px) {
    .hero {
        grid-template-columns: 1fr;
    }

    .art {
        min-height: 0;
        margin-right: 0;
    }

    .art > .asset-hero-scene {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .hero {
        padding: 42px 14px 24px;
        border-radius: 16px;
    }

    .hero h1 {
        font-size: clamp(2.75rem, 13vw, 3.7rem);
        white-space: normal;
    }

    .art > .asset-hero-scene {
        -webkit-mask-image: none;
        mask-image: none;
    }
}