@media (min-width: 761px) {
    .project-row {
        grid-template-columns: 42px minmax(0, 1fr) 230px 20px;
    }

    .project-name,
    .project-discipline {
        white-space: nowrap;
    }

    .project-name {
        min-width: 0;
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    .project-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .project-preview {
        width: min(58vw, 440px);
        max-height: none;
        justify-self: center;
    }

    .swipe-cue {
        display: block;
        justify-self: center;
        margin: -28px 0 0;
    }
}

.swipe-cue {
    display: none;
    color: #8d8d88;
    font-size: 8px;
    line-height: 1;
    letter-spacing: .07em;
    text-transform: uppercase;
    transition: opacity .35s ease, visibility .35s ease;
}

.swipe-cue.is-hidden {
    opacity: 0;
    visibility: hidden;
}

@media (max-width: 760px) {
    .swipe-cue {
        display: block;
        margin: 12px auto 0;
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    .swipe-cue {
        display: block;
        justify-self: center;
        margin: -28px 0 0;
    }
}

.project-preview {
    cursor: pointer;
    touch-action: pan-y;
}

.project-preview:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 5px;
}