@media screen and (min-width: 576px) {


    .specs {
        width: 450px;
        z-index: 1;
        transform: translate(0, 0);

    }

    .specsBase {
        border-radius: var(--border-m) 0;

    }

    .carousel-cell {
        width: fit-content;
        height: 100%;
    }

    .carousel-cell img {
        width: fit-content;
        object-fit: contain;
    }




    @keyframes titl {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }



    /* INFOS */

    .main {
        display: grid;
        grid-template-columns: repeat(12, [col-start] 1fr);
        gap: var(--margin-md);
        padding: var(--base-space) var(--base-space) var(--base-space) var(--base-space);

    }

    .main>hr {
        display: none;
    }

    #portrait img {
        width: 200px;
    }

    #contact {
        grid-column: col-start / span 4;
        /* position: sticky;
        bottom: var(--base-space);
        height: calc(100vh - var(--margin-md));
        align-items: end;
        top: 0; */
        position: fixed;
        bottom: var(--margin-sm);
    }

    #contact a {
        gap: var(--margin-sm);
    }

    #critique {
        font-size: var(--fs-main);
        line-height: var(--lh-main);
        margin-bottom: var(--margin-sm);
    }

    .both {
        grid-column: col-start 4 / span 4;
        display: flex;
        flex-direction: column;
        height: fit-content;
        gap: var(--base-space);
        position: sticky;
        top: var(--margin-sm);
        z-index: 3;
    }

    #sections {
        grid-column: col-start 9 / span 4;
        grid-row: 1;
        margin-top: 0;
    }

    #credits {
        grid-column: col-start 9 / span 4;

    }

    #portrait.active-fullscreen img {
        height: 90%;
        max-width: 100%;
        width: fit-content;
        cursor: zoom-out;
    }

    /* FLICKITY */
    /* --- NATURAL DESKTOP CSS FLOW (Prior to JS loading) --- */
    .main-carousel {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .carousel-cell {
        flex: 0 0 auto;
        width: fit-content;
        scroll-snap-align: start;
    }

    /* --- ADJUST LAYOUT MODIFIERS ONCE FLICKITY RUNS ON MOBILE --- */
    .main-carousel.flickity-enabled {
        display: block;
        overflow-x: hidden;
    }

}