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

.gallery-page{

    padding:5rem 0;

    position:relative;

}

/* ================= HEADER ================= */

.gallery-header{

    text-align:center;

    margin-bottom:4rem;

}

.gallery-title{

    font-size:
    clamp(2rem,5vw,4rem);

    font-weight:900;

    margin-top:1rem;

    color:#fff;

}

.gallery-title span{

    color:#D4AF37;

}

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

.gallery-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}

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

.gallery-card{

    position:relative;

    border-radius:32px;

    overflow:hidden;

    background:
    rgba(255,255,255,.04);

    border:
    1px solid rgba(255,255,255,.05);

    backdrop-filter:blur(10px);

    transition:.5s;

    box-shadow:
    0 10px 40px rgba(0,0,0,.35);

}

/* hover */

.gallery-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(212,175,55,.25);

    box-shadow:
    0 20px 60px rgba(212,175,55,.12);

}

/* ================= IMAGE ================= */

.gallery-image-wrapper{

    display:block;

    position:relative;

    overflow:hidden;

}

.gallery-image{

    width:100%;

    height:380px;

    object-fit:cover;

    transition:
    transform .8s ease;

}

/* zoom */

.gallery-card:hover .gallery-image{

    transform:
    scale(1.08);

}

/* glow */

.gallery-image-wrapper::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,.7),
    transparent 60%);

    opacity:.9;

}

/* ================= OVERLAY ================= */

.gallery-overlay{

    position:absolute;

    bottom:0;

    width:100%;

    padding:1.5rem;

    z-index:5;

}

.gallery-overlay h3{

    color:#fff;

    font-size:1.1rem;

    margin:0;

    font-weight:700;

}

/* ================= ANIMATION ================= */

.gallery-card{

    animation:
    fadeUp .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateY(30px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

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

@media(max-width:768px){

    .gallery-page{

        padding:3rem 1rem;

    }

    .gallery-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .gallery-image{

        height:300px;

    }

}