@media screen and (max-aspect-ratio: 5/4) {
    .face {
        width: 8rem !important;
        height: 8rem !important;
    }
}

@media screen and (max-aspect-ratio: 3/4) {
    .face {
        width: 13rem !important;
        height: 13rem !important;
    }
}

@media screen and (max-aspect-ratio: 5/4) {
    :root {
        font-size: 3.5vmin;
    }

    #presentation-holder {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #presentation-display {
        flex-direction: column;
        width: 95%;
        height: 95%;
    }

    #presentation-display .my-phone-only {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #presentation-holder {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #presentation-background {
        max-height: 50%;
        background-image: url(../images/presentation-background-mobile.jpg);
        background-size: 150%;
        background-position-y: -100%;
    }

    .presentation-phone-content {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 60%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        flex-shrink: 0;
        padding: 1rem;
    }

    .face {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -80%);
    }

    .presentation-phone-content > * {
        margin-bottom: 1rem;
    }

    .description {
        padding: 0 1rem 0 1rem;
    }

    #main-work-holder {
        height: 90vh;
        width: 100%;
        margin: 5vh 0 5vh 0;
    }

    #main-work-secondary-holder {
        height: auto;
        width: auto;
    }

    #main-work-item-display {
        height: 100%;
        min-width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    #main-work-controller {
        display: none;
    }

    #main-work-holder .main-work-item-holder {
        height: 30vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #main-work-holder .work-item-holder {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

   

    #all-work-holder {
        padding: 1em;
    }

    #all-work-filter-holder {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;

        font-size: 0.6rem !important;
    }

    #all-work-items {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .filter-checkbox {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .filter-checkbox .title-text {
        width: auto;
    }

    #all-work-filter-inputs > * {
        margin-right: 1rem;
    }

    #all-checkbox {
        margin-right: 2rem;        
    }

    #all-work-items > .main-work-item-holder {
        aspect-ratio: 3 / 4;
        width: 45%;
        margin: auto;
        height: auto;
        margin: 2px;
    }

    #all-work-items {
        font-size: 0.6rem;
    }

    #pop-up-visual-header {
        padding: 0rem;
        width: 100%;
        aspect-ratio: 16/9;
        background-color: var(--background-very-dark);
    }

    body {
        scroll-snap-type: y mandatory;
    }

    #presentation-holder {
        scroll-snap-align: start;
    }

    #main-work-holder {
        scroll-snap-align: start;
    }

    #all-work-holder {
        scroll-snap-align: start;
    }

    #main-work-item-display {
        scroll-snap-type: x mandatory;
        scroll-padding: 50%;
    }

    #main-work-item-display > .main-work-item-holder {
        scroll-snap-align: start;
    }

}