.hero-art {
    display: grid;
    place-items: center;
    isolation: isolate;
}

.hero-product-image {
    position: relative;
    z-index: 4;
    width: min(100%, 620px);
    height: 510px;
    object-fit: contain;
    filter: drop-shadow(0 28px 28px rgba(3, 56, 70, .2));
}

.science-visual {
    overflow: hidden;
    isolation: isolate;
}

.science-human-image {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 440px;
    height: 440px;
    transform: translate(-50%, -50%);
    object-fit: contain;
    opacity: .76;
    mix-blend-mode: screen;
    filter: saturate(.72) contrast(1.08);
}

.science-visual .metric {
    z-index: 3;
    backdrop-filter: blur(8px);
}

.auth-product-image {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 60%;
    width: min(500px, 88%);
    height: 430px;
    transform: translate(-50%, -50%);
    object-fit: contain;
    filter: drop-shadow(0 28px 30px rgba(0, 0, 0, .32));
}

@media (max-width: 950px) {
    .hero-product-image {
        width: min(620px, 92vw);
        height: 470px;
    }

    .science-human-image {
        width: 420px;
        height: 420px;
    }

    .auth-product-image {
        width: 90%;
        height: 380px;
        top: 62%;
    }
}

@media (max-width: 620px) {
    .hero-art {
        transform: none;
        min-height: 360px;
        margin-bottom: -20px;
    }

    .hero-art .halo {
        width: 340px;
        height: 340px;
        right: 50%;
        top: 10px;
        transform: translateX(50%);
    }

    .hero-product-image {
        width: 390px;
        max-width: 112vw;
        height: 370px;
    }

    .science-visual {
        transform: none;
        min-height: 390px;
    }

    .science-human-image {
        width: 350px;
        height: 380px;
        opacity: .68;
    }
}