.gallery-hero{

    min-height:560px;
    padding:150px 20px 90px;
    display:flex;
    align-items:center;
    color:#4b4646;
    text-align:center;
    background:linear-gradient(115deg,rgba(0,0,0,.78),rgba(0,0,0,.78)),url("../assets/About-Bg.png") center/cover;

}

.gallery-hero-container{

    width:min(1120px,90%);
    margin:0 auto;

}

.gallery-kicker{

    margin:0 0 12px;
    color:#d0d0d0;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.18em;

}

.gallery-hero h1{

    margin:14px 0 18px;
    color:#fff;
    font-size:clamp(3rem,7vw,6rem);

}

.gallery-hero-text{

    max-width:650px;
    margin:0 auto;
    color:#ddd;
    font-size:clamp(1rem,2vw,1.15rem);

}

.gallery-section{

    padding:60px 0;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(70px,90px));

    gap:8px;
    justify-content:center;

}

.gallery-card{

    background:transparent;
    color:var(--ink);
    border:none;
    border-radius:12px;
    overflow:hidden;
    box-shadow:none;
    transition:.3s;
    padding:0;

}

.gallery-card:hover{

    transform:translateY(-4px);

}

.gallery-card img,
.gallery-card video{

    width:100%;

    height:90px;

    object-fit:cover;

    cursor:pointer;

    display:block;

    border-radius:8px;

    box-shadow:0 3px 10px rgba(0,0,0,.1);

    border:1px solid rgba(0,0,0,.08);

}

.gallery-card .gallery-media{

    width:70px;
    height:70px;
    aspect-ratio:1 / 1;
    object-fit:cover;

}

.gallery-card h3{

    display:none;

}

/* Modal */

.modal{

    display:none;

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    padding:24px;

    background:rgba(0,0,0,.9);

    z-index:9999;

    align-items:center;
    justify-content:center;

}

.modal img,
.modal video{

    display:block;

    width:auto;

    max-width:calc(100vw - 48px);

    max-height:calc(100vh - 48px);

    border-radius:10px;

    background:#000;

    object-fit:contain;

}

.close{

    position:absolute;

    top:20px;

    right:40px;

    z-index:1;

    color:white;

    font-size:45px;

    cursor:pointer;

}

@media(max-width:760px){

    .gallery-hero{
        min-height:470px;
        padding:130px 20px 70px;
    }

    .gallery-section{
        padding:50px 0;
    }

}