*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

/* ========================================
   PROJECT LIGHTBOX
========================================= */

@media (min-width: 0rem) {

    .project-lightbox {
        position: fixed;
        z-index: 500;
        inset: 0;

        display: grid;
        place-items: center;

        padding: 1rem;

        visibility: hidden;
        opacity: 0;

        pointer-events: none;
    }

    .project-lightbox.is-open {
        visibility: visible;
        opacity: 1;

        pointer-events: auto;
    }

    .project-lightbox__backdrop {
        position: absolute;
        inset: 0;

        background: rgba(6, 20, 15, .86);

        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .project-lightbox__panel {
        position: relative;
        z-index: 2;

        width: min(100%, 88rem);
        max-height: calc(100dvh - 2rem);

        overflow-y: auto;

        background: var(--cream);

        box-shadow:
            0 2rem 5rem rgba(0, 0, 0, .3);
    }

    .project-lightbox__close {
        position: absolute;
        z-index: 5;
        top: 1rem;
        right: 1rem;

        display: grid;
        place-items: center;

        width: 2.8rem;
        height: 2.8rem;

        color: white;
        background: rgba(13, 43, 32, .8);

        border: 1px solid rgba(255,255,255,.3);
        border-radius: 50%;

        font-size: 1.5rem;

        cursor: pointer;
    }

    .project-lightbox__main-image {
        aspect-ratio: 1.2;

        overflow: hidden;
    }

    .project-lightbox__main-image img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .project-lightbox__thumbs {
        display: flex;
        gap: .6rem;

        padding: .75rem;
    }

    .project-lightbox__thumbs button {
        width: 4.5rem;
        aspect-ratio: 1;

        padding: 0;

        overflow: hidden;

        background: transparent;
        border: 1px solid transparent;

        cursor: pointer;
    }

    .project-lightbox__thumbs button.is-active {
        border-color: var(--forest);
    }

    .project-lightbox__thumbs img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .project-lightbox__content {
        padding: 2rem 1.5rem 2.5rem;
    }

    .project-lightbox__content h2 {
        margin: 0;

        color: var(--forest);

        font-family: var(--serif);
        font-size: clamp(2.4rem, 9vw, 4rem);
        font-weight: 400;
        line-height: 1;
    }

    .project-lightbox__meta {
        color: var(--muted);

        font-size: .72rem;
        letter-spacing: .1em;

        text-transform: uppercase;
    }

    .project-lightbox__description {
        max-width: 34rem;

        color: #52605a;

        line-height: 1.7;
    }

}

@media (min-width: 48rem) {

    .project-lightbox {
        padding: 2rem;
    }

    .project-lightbox__panel {
        display: grid;
        grid-template-columns: 1.25fr .75fr;

        max-height: calc(100dvh - 4rem);

        overflow: hidden;
    }

    .project-lightbox__gallery {
        min-height: 36rem;
    }

    .project-lightbox__main-image {
        height: calc(100% - 6rem);
        aspect-ratio: auto;
    }

    .project-lightbox__content {
        display: flex;
        flex-direction: column;
        justify-content: center;

        padding: 4rem;
    }

}