@media (max-width: 768px) {

    /* NAV */
    nav {
        left: calc(100% - 30px - 16px);
        bottom: 16px;
    }

    /* PROJECT */

    #works {
        gap: 20vh;
    }

    .project {
        height: auto;
    }

    .main-carousel {
        height: fit-content;
    }

    .project.is-open .flickity-page-dots {
        display: inherit;
        bottom: 0;
        padding: calc(var(--base-space)*3) 0;
    }

    .flickity-page-dots .dot {
        background: var(--color-white);
        width: 8px;
        height: 8px;
        margin: 0 6px;
    }

    .carousel-cell {
        width: 100%;
        height: auto;
        margin-right: 0;
        transition: width .8s cubic-bezier(0.84, 0, 0.4, 1);
    }

    /* Closed state only: narrow the launcher's own cell so the
       #project-N .main-carousel padding-left offset (index.css) has room
       to actually shift it right, same deconstructed-grid effect as
       desktop. Goes back to full width with the rest of the cells once
       the project opens, for normal full-width slide browsing. Width
       depends on orientation (see .is-portrait/.is-landscape, set in
       index.js) since a 65%-wide vertical image reads very differently
       from a 65%-wide horizontal one. */
    .project:not(.is-open) .carousel-cell:has(.launcher.is-landscape) {
        width: 85%;
    }

    .project:not(.is-open) .carousel-cell:has(.launcher.is-portrait) {
        width: 65%;
    }

    /* Every image is forced into one of two fixed ratios (1.5) rather than
       keeping its own raw proportions - see classifyOrientation() in
       index.js, which tags .is-portrait/.is-landscape once each image's
       real dimensions are known. object-fit:cover crops to match. */
    .carousel-cell img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .carousel-cell img.is-portrait {
        aspect-ratio: 2 / 3;
    }

    .carousel-cell img.is-landscape {
        aspect-ratio: 3 / 2;
    }

    .project.is-open .project-title {
        opacity: 0;
    }

    .project.is-open .main-carousel {
        height: fit-content;
    }


    .project.is-open figcaption {
        opacity: 1;
    }


    .project-text {
        display: flex;
        flex-direction: column;
        height: 25vh;
        overflow: scroll;
        gap: calc(var(--base-space)*2);
    }

    .project-title {
        opacity: 1;
        padding: var(--base-space) calc(1.5 * var(--base-space));
        display: grid;
        gap: calc(0.5 * var(--base-space));
    }

    .col-Left {
        padding: 0 70px 0 calc(2*var(--base-space));
    }

    .col-Right {
        padding: 0 70px 0 calc(2*var(--base-space));

        /* display: none; */
    }

    /* ABOUT */
    #about figure {
        right: 0;
    }

    #about img {
        height: auto;
        width: 60vw;
    }

    .about-text {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .col-Single {
        color: var(--color-dark);
        font-size: var(--fs-main);
        line-height: var(--lh-main);
        padding: 0 70px 0 calc(2*var(--base-space));
    }


    /* DRWaings */

    .drawing img {
        transform: rotate(90deg);
    }
}