.mobile-only {
    display: none;
}

@media (max-width: 768px) {


    /* GENERAL */

    body {
        overflow-y: scroll;
    }

    .mobile-only {
        display: block !important;
    }

    .desktop-only {
        display: none;
    }

    .hello,
    section:first-child {
        margin-top: unset;
        border: 0;
        width: 70vw;
        min-width: unset;
        max-width: unset;
        flex-direction: column;
        touch-action: pan-x;


    }


    .back {
        opacity: 0;
        pointer-events: none;
        position: fixed;
        top: 15px;
        right: 7px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #000;
        color: white;
        display: flex !important;
        justify-content: center;
        align-items: center;
        font-size: 0.9rem;
        transition: all .2s ease;

    }

    .white-gradient {
        opacity: 0;
        width: 6em;
        height: calc(8svh - 2px);
        position: absolute;
        top: 0;
        right: 0;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 60%);
        transition: all .2s ease;
    }

    /* SITETITLE and HELLO */

    #sitetitle {
        width: 100%;
        position: unset;
    }

    #sitetitle.mobile-only h1 {
        font-size: 5em;
    }

    .hello p {
        font-size: 1.5rem;
    }




    /* COLS and SECTIONS */

    main {
        flex-direction: column;
        flex: 1 0 100dvh;
    }

    .maincol {
        /* flex: 1 0 100vw; */
        min-width: unset;
        max-width: unset;
        height: auto;
        border-left: 0;
        display: flex;
        flex-direction: row;
        overflow-x: scroll;
        overflow-y: hidden;
        justify-content: flex-start;

    }

    .left-col {
        /* order: 3; */
        border-bottom: 2px solid black;

        flex: 1 0 8svh;
        flex-direction: row;
        align-items: center;
        gap: 3em;
        padding-left: 1.5em;
    }


    .mid-col {
        flex: 0 0 75svh;
        border-bottom: 2px solid black;

    }

    .right-col {
        flex: 0 0 auto;
        /* border-bottom: 2px solid black; */
        touch-action: pan-y;

    }

    .col-divider {
        display: none;
    }

    section {
        min-height: unset;
        min-width: 100vw;
        height: 100%;
        border-top: none;
        border-left: 2px solid #000;
        flex-direction: row;
        flex-shrink: 0;
        gap: 2em;
        padding: 1.5em 2.5em 2em;
    }


    .right-col section:not(.hello) {
        width: calc(100vw - 2px - 20px);
        min-width: unset;
        flex-direction: column;
    }


    /* IMAGES */

    figure {
        width: fit-content;
        display: flex;
        align-items: flex-end;
        position: relative;
        height: 100%;
        gap: 1em;
    }

    figure img {
        width: 90vw;
        height: 100%;
        object-fit: cover;
    }

    figcaption {
        width: 90vw;
        padding: 1em 3em 1em 1em;
        /* background-color: rgba(255, 255, 255, 0.9); */
        flex-direction: column;
        margin: 0;
        line-height: 1.5;
        position: absolute;
        gap: 1em;
        color: white;
        font-size: .9rem;
        display: none;
        backdrop-filter: blur(100px);

    }


    figure.caption-active figcaption {
        display: flex;
    }

    .fig-info-btn {
        position: absolute;
        bottom: 0.75em;
        right: 0.75em;
        width: 1.5em;
        height: 1.5em;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0);
        color: white;
        border: 1px solid white;
        mix-blend-mode: difference;
        font-size: 0.7rem;
        font-weight: bold;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }

    figure.caption-active .fig-info-btn {
        display: none;
    }

    .fig-close-btn {
        position: absolute;
        top: 0.4em;
        right: 0.4em;
        background: none;
        border: none;
        color: white;
        font-size: 1.1rem;
        cursor: pointer;
        padding: 0.2em;
        line-height: 1;
        z-index: 11;
    }

    .copyright {
        text-align: left;
        color: lightgrey
    }

    .block-type-video figure {
        /* align-items: center; */
        background-color: rgba(0, 0, 0, 0.5);
    }

    video {
        width: 90vw !important;
        align-self: center;
    }



    /* TEXTS */

    .start-arrow {
        font-size: 3rem;
        margin-left: 1em
    }

    .project-text {
        padding-left: 1em
    }

    /* .project-text,
    .project-credits {
        column-gap: 1.5em;
        hyphens: auto;
        column-fill: auto;
        overflow: visible;
    } */
    /* 
    .project-text p,
    .project-credits p {
        break-inside: auto;
        overflow-wrap: break-word;
        margin: 0
    }

    .project-text p:not(:first-child) {
        text-indent: 2em;
    } */



    .right-col section {
        padding: 1em;
    }


    .right-col section:not(.hello) div:first-child {
        margin-top: 0;
    }

    .project-headings {
        max-width: 85vw
    }

    /* h2 {
        font-size: 1.2rem;
    }*/

    h3 {
        /* font-size: .8rem; */
        margin-top: .75em;
    }


    /* NAV */

    nav.categories {
        position: unset;
        height: 100%;
    }

    body.mobile .projects li.active {
        text-decoration: underline;
        text-decoration-thickness: 1px;
    }


    nav,
    nav ul {
        flex-direction: row !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        height: fit-content !important;
        padding: 0 !important;
    }

    .legals {
        padding-right: 6em !important;
    }


    nav.mainnav ul {
        gap: 2rem;
    }

    #info .block-type-text {
        columns: 85vw auto;
        column-gap: 3em;
        column-fill: auto;
        width: calc(85vw * 2 + 3em);


    }

    #info-rightcol figcaption {
        font-size: .7em;
    }


    /* LEGAL */

    /* body.legal .left-col, */
    body.legal .right-col {
        display: none;
    }

    body.legal .mid-col {
        border: none;
        width: 100vw;
        height: 100vh;
        flex: 0 0 100vh;
        padding-top: 8em
    }

    body.legal .mid-col section {
        overflow-y: scroll;
        padding-bottom: 2em;
    }

    body.legal .mid-col section {
        height: 100%;
        width: 100%;
    }

    body.legal #sitetitle {
        position: fixed !important;
        top: 1.4em;
        left: 1.75em;
        max-width: 70vw !important;
    }

    #close {
        z-index: 1000;
    }
}