/* ==========================================
   PROJECTS PAGE
========================================== */

.projects-page {
    position: relative;
    z-index: 5;
    background: var(--bg);
    color: var(--text);
}


/* ==========================================
   INTRO
========================================== */

.projects-intro {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 20px;
   /* background-color: red;*/
    padding: 300px 20px 100px;
  
    box-sizing: border-box;
}

.projects-intro__empty {
    grid-column: 1 / 7;
}

.projects-intro__content {
    grid-column: 7 / 13;
}

.projects-intro__line {
    width: 100%;
    height: 1px;
    margin-bottom: 20px;
    background: var(--text);
}

.projects-intro__label {
    margin: 0 0 20px;
    font-size: var(--font-size-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-small);
}

.projects-intro__title {
    font-size:var(--font-size-3xl);

    line-height:.95;

    letter-spacing:-0.02em;

}


/* ==========================================
   PROJECTS GRID
========================================== */

.projects-grid {
    position: relative;
    padding: 100px 20px 160px;
    background: var(--bg);
}


/* ==========================================
   GRID
========================================== */

.grid-container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 120px;
    align-items: start;
}


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

.grid-project {
    position: relative;
    min-width: 0;
    align-self: start;
    height: fit-content;

}

.grid-project a {
    display: block;
    text-decoration: none;
    color: inherit;
}


/* ==========================================
   GRID STRUCTURE
========================================== */

/* PROJECT 01 = 6 columns */

.grid-project--featured {
    grid-column: 1 / 7;
}


/* PROJECT 02 + 03 = 3 columns */

.grid-project--small {
    grid-column: span 3;
}


/* PROJECT 04 → 11 = 3 columns */

.grid-project--four {
    grid-column: span 3;
}


/* ==========================================
   MEDIA
========================================== */

.grid-project__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #111;
        border-radius: var(--border-rad);
}


/* PROJECT 01 = 1:1 */

.grid-project--featured .grid-project__media {
    aspect-ratio: 1 / 1;
}


/* PROJECT 02 → 11 = 5:4 */

.grid-project--small .grid-project__media,
.grid-project--four .grid-project__media {
    aspect-ratio: 4 / 5;
}


/* ==========================================
   VIMEO
========================================== */

.grid-project__media iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 125%;
    height: 125%;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    pointer-events: none;
}


/* ==========================================
   IMAGES
========================================== */

.grid-project__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ==========================================
   CAPTION
========================================== */

.grid-project__caption {
    margin-top: 10px;
    color: var(--text);
}

.caption-line {
    overflow: hidden;
}

.caption-line + .caption-line {
}

.caption-reveal {
    transform: translateY(10%);
    will-change: transform;
}


/* EXACTEMENT TA TYPO */

.grid-project__caption h3 {
    font-size: var(--font-size-lg);
    letter-spacing: var(--letter-spacing-small);
}

.grid-project__caption p {
    color: var(--text-grey);
    transform: translateY(0%);
    font-size: var(--font-size-sm);
}







/* ==========================================
   TABLET
========================================== */

@media (max-width: 1024px) {

    .projects-intro {
        padding: 140px 20px 80px;
    }

    .projects-grid {
        padding: 80px 20px 120px;
    }

    .grid-container {
        column-gap: 16px;
        row-gap: 90px;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

    .projects-intro {
        display: block;
        padding: 120px 20px 80px;
    }

    .projects-intro__empty {
        display: none;
    }

    .projects-intro__content {
        width: 100%;
    }

    .projects-intro__title {
        font-size: clamp(4rem, 20vw, 8rem);
    }

    .projects-grid {
        padding: 40px 20px 100px;
    }

    .grid-container {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 80px;
        align-items: start;
    }

    .grid-project--featured,
    .grid-project--small,
    .grid-project--four {
        grid-column: 1 / -1;
    }

    .grid-project--featured .grid-project__media {
        aspect-ratio: 1 / 1;
    }

    .grid-project--small .grid-project__media,
    .grid-project--four .grid-project__media {
        aspect-ratio: 4 / 5;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

    .projects-intro {
        padding-top: 100px;
    }

    .projects-grid {
        padding-bottom: 80px;
    }

    .grid-container {
        row-gap: 60px;
    }

}