@media (max-width: 1080px) {
    .container {
        padding: 0 4rem;
    }
    .hero-content {
        padding: 0 0 0 4rem;
        width: 75%;
    }
    .header-container {
        padding: 0.75rem 4rem 0.75rem 4rem;
    }
    .footer-container {
        padding: 0 4rem;
    }

}



@media (max-width: 840px) {

    .container {
        padding: 0 2rem;
    }
    .hero-content {
        padding: 0 0 0 2rem;
        width: 100%;
    }
    .header-container {
        padding: 0.75rem 2rem 0.75rem 2rem;
    }
    .footer-container {
        padding: 0 2rem;
    }

    
    .hideonmobile {
        display: none;
    }
    .menu-button {
        display: block;
    }

    /* layout */

    .grid-main {
        grid-template-columns: repeat(8, 1fr);
    }

    .grid-leftcolumn {
        grid-column: 1 / 3;
    }

    .grid-content1 {
        grid-column: 3 / 9;
    }

    .grid-content2 {
        grid-column: 4 / 9;
    }

    .grid-full {
        grid-column: span 8;
    }

    .grid-title {
        grid-column: span 8;
    }

        /* portraits */
    .portrait {
        grid-column: span 4; 
    }

    .portraits-display {
        flex-direction: column;
    }


}


@media (max-width: 480px) {

    :root {
        --spacing-sections: 4rem;

        --text-size_100: 0.25rem;
        --text-size_200: 0.5rem;
        --text-size_300: 0.625rem;
        --text-size_350: 0.75rem;
        --text-size_400: 0.875rem;
        --text-size_500: 1rem;
        --text-size_600: 1.22rem;
        --text-size_700: 1.44rem;
        --text-size_800: 1.73rem;
        --text-size_900: 2rem;
        --text-size_1000: 2.5rem;

        --containers-padding-100: 0.25rem;
        --containers-padding-200: 0.25rem;
        --containers-padding-300: 0.5rem;
        --containers-padding-400: 0.75rem;
        --containers-padding-500: 1rem;
        --containers-padding-600: 1.5rem;

        --grid-gap_n: 1rem; 
    }

    .container {
        padding: 0 1.5rem;
    }
    .hero-content {
        padding: 0 1.5rem 0 1.5rem;
        width: 100%;
    }
    .header-container {
        padding: 1rem 1.5rem 0.75rem 1rem;
    }
    .footer-container {
        padding: 0 1.5rem;
    }
    .hero-content > div {
        width: 100%;
    }



    /* .grid-main {
        grid-template-columns: repeat(8, 1fr);
    } */

    .grid-leftcolumn {
        grid-column: span 8;
    }

    .grid-content1 {
        grid-column: span 8;
    }

    .grid-content2 {
        grid-column: span 8;
    }

    .grid-full {
        grid-column: span 8;
    }

    .grid-title {
        grid-column: span 8;
    }

    /* images */

    .img-full-1  {
        height: max(15rem);
    }

    .img-full-2 {
        height: max(25rem);
    }

    /* Hero */

    .hero-container {
        padding: 0 0 2rem 0;
    }

    /* quotes */
    .quote-grid {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(8, minmax(10rem, 1fr));
        grid-template-areas: 
        "a a a a a a a a"
        "a a a a a a a a"
        "b b b b b b b b"
        "b b b b b b b b"
        "c c c c c c c c"
        "c c c c c c c c"
        "d d d d d d d d"
        "d d d d d d d d"
        ;
    }
}