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

    :root {
        --main-padding-1x: 20px;
        --main-padding-2x: 40px;
        --main-padding-3x: 60px;

        --main-nav-width: 40px;
    }



    section.menu {
        width: calc(100% - var(--main-nav-width));
        padding-left: var(--main-padding-1x);
    }
    section.menu.slide-in {
        left: 0;
    }
    


    main.homepage.desktop {
        display: none;
    }
    main.homepage.mobile {
        display: flex;
    }


    div#lightbox {
        padding: var(--main-padding-1x);
    }

    main.project > section.project-images {
        padding-top: var(--main-padding-3x);
        padding-bottom: calc(var(--main-padding-3x) * 2);
    }
    main.project > section.project-images figure {
        /* margin-block-start: -2em; */
        height: calc((100vh - var(--main-padding-3x) * 3) / 2);
        height: calc((var(--vh, 1vh) * 100 - var(--main-padding-3x) * 3) / 2);
        width: 75vw;
    }
    main.project > section.project-images figure > img.landscape {
        height: auto;
        max-width: 65%;
      }
      main.project > section.project-images figure > img.portrait {
        max-height: 65%;
        width: auto;
      }
      main.project > section.project-images figure > img.square {
        height: auto;
        width: 50%;
      }

    main.project > section.install-images > figure {
        height: auto;
    }
    article.project-description {
        width: calc(100% - var(--main-nav-width) - var(--main-padding-1x) * 2);
    }
    article.project-description.max-height { 
        height: calc(100vh - var(--main-padding-1x) * 2);
        height: calc(var(--vh, 1vh) * 100 - var(--main-padding-1x) * 2);
    }
    article.project-description > section.max-height {
        max-height: calc(100vh - var(--main-padding-1x) * 2);
        max-height: calc(var(--vh, 1vh) * 100 - var(--main-padding-1x) * 2);
        /* overflow: scroll; */
    }


    .mobile-hidden {
        display: none;
    }


}