@media only screen and (max-width: 1370px) {
    body {
        overflow-x: hidden;
    }
    
    html, body {
        overflow-x: hidden;
        max-width: 100%;
        box-sizing: border-box;
    }
    .dsk-only {
        display: none !important;
    }
    .mbl-only {
        display: flex;
    }
    .btn {
        max-width: 100%;
    }



    nav, footer {
        margin: 0.25rem 0;
        padding: 0.1rem 1rem;
        width: 100%;
        box-sizing: border-box;
    }
    nav a {
        font-size: 1rem;
        margin: 4px;
    }
    .logo {
        min-height: 2.50rem !important;
    }

    .body-container {
        box-sizing: border-box;
        margin: 1rem 0;
        padding: 1rem 1rem;
        width: 100%;
        flex-direction: column;
        text-align: center;
    }
    .body-container-div {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 0;

    }

    .body-container-l {
        text-align: center;
        max-width: 100% !important;
    }

    .headshot-btns {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        text-align: center;
        position: relative;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
    }
    .headshot-desc {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 0;
    }
    .headshot-btns h2 {
        font-size: 1.25rem;
        padding: none;
    }
    .headshot-btns a {
        box-sizing: border-box;
    }

    .bw-container {
        flex-direction: column;
    }
    .bestwork {
        margin: 0.5rem 0;
    }
    .bw-btns {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .bw-btns h3 {
        margin: 0 0 !important;
    }
    .bwContainer {
        flex-direction: column;
    }

    /*Expansion CSS*/
    .expanded-img {
        max-height: fit-content;
        max-width: 100%;
    }
    .body-expanded-container {
        display: flex;
        flex-direction: column;
    }
    .closed {
        width: 0;
        transition: 0.5s;
    }
    .expanded-exit {
        display: flex;
        flex-direction: column;
        justify-items: flex-end !important;
        align-items: flex-end;
    }
    .expanded-exit button {
        margin-bottom: 0.5rem;
    }
    .body-expanded {
        margin: 1rem 1rem
    }


    .workflow {
        flex-direction: column;
    }
    .workflow .arrow {
        transform: rotate(90deg);
    }
    .t-center {
        text-align: center;
    }

    .g__grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-column-gap: 2rem;
        grid-row-gap: 2rem;
    }
    
    .g__img {
        width: 100%;
        box-sizing: border-box;
        border: 5px solid rgba(255, 53, 53, 0.1);
        border-radius: 0.5rem;
    }
    .g__empty {
        background-color: rgba(255, 53, 53, 0.1);
        border-radius: 0.5rem;
    }
    
    
    .g__grid1 { grid-area: 1 / 1 / 2 / 2; }
    .g__grid2 { grid-area: 2 / 1 / 3 / 2; }
    .g__grid3 { grid-area: 3 / 1 / 4 / 2; }
    .g__grid4 { grid-area: 4 / 1 / 5 / 2; }
    .g__grid5 { grid-area: 5 / 1 / 6 / 2; display: none; }
    .g__grid6 { grid-area: 6 / 1 / 7 / 2; display: none;}

    .wf__flex {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 1rem;
    }
    .wf__img {
        width: 100%;
    }
    .wf--1 { grid-area: 1 / 1 / 2 / 2; }
    .wf--2 { grid-area: 2 / 1 / 3 / 2; }
    .wf--3 { grid-area: 3 / 1 / 4 / 2; }

}