:root{
    --primary: #C5A880;
    --primary-hover: #B49469;
    --accent: #B85A38;
    --bg-dark: #121413;
    --bg-card-dark: #1B1E1C;
    --bg-light: #FAF9F6;
    --bg-white: #FFFFFF;
    --text-dark: #1F2421;
    --text-gray: #5A6560;
    --text-light: #FFFFFF;
    --border-color: #E2DFD9;
}

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

.gallery-section{
    padding:  6%;
    padding-top: 170px;
    background:var(--bg-light);
    position:relative;
    overflow:hidden;
}

.gallery-section::before{
    content:'';
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;
    background:rgba(197,168,128,.08);
    top:-150px;
    right:-100px;
}

.section-header{
    max-width:700px;
    margin:auto;
    text-align:center;
    margin-bottom:30px;
}

.sub-title{
    display:inline-block;
    color:var(--accent);
    font-size:.95rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:12px;
}

.section-header h2{
    font-size:3rem;
    color:var(--text-dark);
    margin-bottom:20px;
    font-weight:700;
}

.section-header p{
    color:var(--text-gray);
    line-height:1.8;
    font-size:1rem;
}

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

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    background:var(--bg-white);
    box-shadow:
    0 10px 30px rgba(0,0,0,.08);
    cursor:pointer;
}

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:all .7s ease;
}

.gallery-item:hover img{
    transform:scale(1.15);
}

/* Different Heights */

.gallery-item{
    height:280px;
}

.gallery-item.large{
    grid-column:span 2;
    height:420px;
}

.gallery-item.tall{
    height:580px;
}

/* Overlay */

.overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        to top,
        rgba(18,20,19,.95),
        rgba(18,20,19,.15)
    );

    display:flex;
    align-items:flex-end;
    padding:30px;
    opacity:0;
    transition:.4s ease;
}

.gallery-item:hover .overlay{
    opacity:1;
}

.overlay h3{
    color:var(--text-light);
    font-size:1.4rem;
    transform:translateY(30px);
    transition:.4s ease;
}

.gallery-item:hover h3{
    transform:translateY(0);
}

/* Gold Border Animation */

.gallery-item::after{
    content:'';
    position:absolute;
    inset:15px;
    border:2px solid var(--primary);
    opacity:0;
    transform:scale(.9);
    transition:.5s ease;
    border-radius:15px;
}

.gallery-item:hover::after{
    opacity:1;
    transform:scale(1);
}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:1200px){

    .gallery-grid{
        grid-template-columns:repeat(3,1fr);
    }

}

@media(max-width:992px){

    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .gallery-item.large{
        grid-column:span 1;
        height:320px;
    }

    .gallery-item.tall{
        height:320px;
    }

    .section-header h2{
        font-size:2.5rem;
    }
}

@media(max-width:576px){

    .gallery-grid{
        grid-template-columns:1fr;
    }

    .gallery-item,
    .gallery-item.large,
    .gallery-item.tall{
        height:280px;
    }

    .gallery-section{
        padding:80px 20px;
    }

    .section-header h2{
        font-size:2rem;
    }
}