.auth-hero {
    display: none;
}

@media (min-width: 768px) {
    .auth-hero {
        display: block;
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        overflow: hidden;
        background-color: #6554ed;
        background-image: url('../../img/auth/hero-bg.svg');
        background-repeat: no-repeat;
        background-position: right center;
        background-size: auto 100%;
    }

    .auth-hero__badge {
        position: absolute;
        top: clamp(24px, 5vh, 50px);
        right: clamp(24px, 4vw, 53px);
        width: clamp(48px, 5vw, 68px);
        height: clamp(48px, 5vw, 68px);
        object-fit: contain;
        z-index: 1;
        pointer-events: none;
    }
}