@media only screen and (max-width: 1400px) {

    #landing-hero{
        height: 100%;
    }

    #landing-hero-showreel{
        position: relative;
        width: 100vw;
        height: 60vh;
        min-width: 100%; 
        min-height: 100%; 
        top: 0;
        background: gold;
        overflow: hidden;
    }

    #landing-hero-copy{
        position: relative;
        display: block;
        width: var(--grid-width) ;
        height: auto;
        left: 0;
        bottom: 0;
    }

    #landing-hero-para{
        width: 650px;
        display: block;
        margin-left: 0px;
        margin-top: 30px;
    }

    #landing-hero-para p{
        display: inline-block;
    }

    #landing-hero-para br{
        display: none;
    }

    .hero-title-list{
        margin-top: 2px;
    }

}

@media only screen and (max-width: 900px) {

    :root{
        --grid-width: 90vw;
        --section-padding: 50px;
        --h1height: 90px; 
    }

    h1{
        font-size: 115px;
        line-height: 90px;
    }

    .nav-buttons a{
        display: block;
        text-align: center;
    }

    .nav-email{
        visibility: hidden;
    }

    #landing-hero-copy{
        left: 2.5vw;
    }

    #landing-hero-headline{
        width: 90%;
    }

    #landing-hero-para{
        width: 90%;
    }

    #landing-hero-para-copy br{
        display: none;
    }

    #landing-hero-links {
        margin-top: 15px;
    }

    #landing-hero-showreel{
        position: relative;
        width: 100vw;
        height: calc(100vh - 330px);
        min-height: 0%;
        min-width: 0%; 
        top: 0;
        background: var(--black);
        overflow: hidden;
    }
    
    #landing-hero-showreel video{
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        height: 100%;
        min-width: 0%; 
        min-height: 0%; 
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    .grid{
        grid-template-columns: var(--grid-width) ;
        gap: 50px;
    }
    
    .grid-item img {
        text-align: center;
        height: calc((var(--grid-width)) / 1.5);
        width: calc(((var(--grid-width)) / 1));
        object-fit: cover;
    }
    
    .grid-item video {
        height: calc((var(--grid-width)) / 1.5);
        width: calc(((var(--grid-width)) / 1));
        object-fit: cover;
    }

    .post-categories{
        display: none;
    }

    /*--- Footer ---*/

    .footer{
        position: relative;
        height: 100px;
    }

    .footer-links{
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100vw;
        height: auto;
    }
      
    #footer-link-left{
        display: block;
        position: relative;
        bottom: 0px;
        left: 0px;
    }
      
    #footer-link-right{
        display: block;
        position: relative;
        bottom: 0px;
        left: 0px;
    }

}

@media only screen and (max-width: 710px) {

    :root{
        --h1height: 180px; 
    }

    #landing-hero-headline{
        width: 74%;
    }

    .hero-titles {
        height: calc(var(--h1height) - 2px);
    }

    .hero-title-list{
        margin-top: 2px;
    }
}

@media only screen and (max-width: 600px) {

    .nav-email{
        display: none !important;
    }

}

@media only screen and (max-width: 450px) {

    #landing-hero-headline{
        width: 95%;
    }
    
    .hero-titles {
        height: calc(var(--h1height) - 2px);
    }

    #landing-hero-links{
        display: none;
    }

}