#home-heroine {
    width: 100vw;
    height: 100vh;
    height: var(--hero-height);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
}

#home-heroine #gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100vh;
    height: var(--hero-height);
    background: linear-gradient(90deg, rgba(35, 35, 35, 0.95), #23232300);
}

#home-heroine .ursula-vg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    height: var(--hero-height);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
}

@media only screen and (min-aspect-ratio: 8/5) {
    .webp .ursula-vg {
        background-image: url("/wp-content/themes/sintzel/img/heroine/u-16-9.webp");
    }
    
    .no-webp .ursula-vg {
        background-image: url("/wp-content/themes/sintzel/img/heroine/u-16-9.png");
    }
}

@media only screen and (max-aspect-ratio: 8/5) {
    .webp .ursula-vg {
        background-image: url("/wp-content/themes/sintzel/img/heroine/u-8-5.webp");
    }
    
    .no-webp .ursula-vg {
        background-image: url("/wp-content/themes/sintzel/img/heroine/u-8-5.png");
    }
}

@media only screen and (max-aspect-ratio: 4/3) {
    .webp .ursula-vg {
        background-image: url("/wp-content/themes/sintzel/img/heroine/u-4-3.webp");
    }
    
    .no-webp .ursula-vg {
        background-image: url("/wp-content/themes/sintzel/img/heroine/u-4-3.png");
    }
}

#heroine-grid {
    height: 100%;
    display: grid;
    grid-template-columns: 2fr 3fr;
    column-gap: 2em;
}

#heroine-content {
    color: var(--white);
    z-index: 1;
    margin: auto 0;
    width: 100%;
    text-shadow: 1px 1px 10px #36363670;
}

#heroine-content h1 {
    font-size: clamp(1.5rem, 3vw, 10rem);
}

#heroine-content p, #heroine-content h5 {
    font-size: clamp(1rem, 2vw, 2rem);
}

#heroine-content a {
    font-size: clamp(1rem, 1.5vw, 1.5rem);
}

/* FORM ON MOBILE */
@media only screen and (max-width: 980px) {
    #heroine-grid {
        grid-template-columns: 1fr;
    }

    #home-heroine #gradient-overlay {
        width: 100%;
        background: linear-gradient(180deg, #23232300 50%, rgba(35, 35, 35, 0.8) 80%);
    }

    #heroine-content {
        margin: auto 0 1rem auto;
        width: 100%;
    }
}