/* HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO */
    .hero{
        width: 100%;
        height: 50vh;
        display: flex;
        align-items: flex-end;
    }

    .title{
        width: 80%; 
        padding-left: 0;
    }

    h1{
        font-size: var(--text-desktop-xxl);
        padding-bottom: var(--space-s);
        letter-spacing: -15px;
        line-height: .8;
    }

    /* Styling af bogstaverne i H1 */
        h1 span{
            font-variation-settings: "wdth" 100, "wght" 800;
            transition: font-variation-settings var(--transition-fast);
            transition-delay: calc(var(--index) * 0.1s);
        }

        /* Hover animation på bogstaverne */
            h1:hover span{
                font-variation-settings: "wdth" 90, "wght" 300;
            }

    .hero h2{
        font-family: var(--font-header);
        color: var(--color-text);
        font-weight: 400;
        max-width: 50ch;
        margin-left: 0;
        margin-top: var(--space-s);
        font-size: var(--text-desktop-s);
    }

    h2>span{
        font-style: italic;
        color: var(--color-cta);
    }


/* PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS */
    .projects{
        flex-direction: column-reverse;
    }

    .projects article{
        width: 100%;
    }


/* Vises på mellemstore skærme */
@media screen and (max-width:768px){
    h1{
        font-size: var(--text-tablet-xxl);
        letter-spacing: -10px;
        padding-bottom: 0;
        padding-top: var(--space-m);
    }

    .hero h2{
        font-size: var(--text-tablet-m);
    }

/* PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS */
    .projects img, .projects video{
        aspect-ratio: 16 / 11;
    }
}

/* Vises på små skærme */
@media screen and (max-width:480px){
    h1{
        font-size: var(--text-mobile-xxl);
        letter-spacing: -7px;
    }

    .hero h2{
        font-size: var(--text-mobile-m);
    }
}