/* ==========================================================
   GALLERY
========================================================== */

.gallery{

    background: var(--color-background);
    padding: 120px 0;

}

.section-header{

    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;

}

.section-subtitle{

    display: inline-block;

    color: var(--color-primary);

    font-size: .85rem;

    font-weight: 600;

    letter-spacing: 4px;

    text-transform: uppercase;

    margin-bottom: 18px;

}

.gallery h2{

    margin-bottom: 24px;

}

.gallery p{

    color: var(--color-text-light);

    line-height: 1.8;

}

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

.gallery-grid{

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 28px;

}

/* ==========================
   CARD
========================== */

.gallery-card{

    overflow: hidden;

    border-radius: 20px;

    background: var(--color-surface);

    transition: .35s ease;

    cursor: pointer;

}

.gallery-card:hover{

    transform: translateY(-8px);

}

.gallery-card img{

    width: 100%;

    aspect-ratio: 4 / 5;

    object-fit: cover;

    display: block;

    transition: .5s ease;

}

.gallery-card:hover img{

    transform: scale(1.05);

}