.hs-gallery{
    width:100%;
}

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

.gallery-item{
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    cursor:pointer;
    background:#000;
}

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

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

.live-badge{
    position:absolute;
    top:12px;
    right:12px;
    z-index:3;
    background:#c7a25a;
    color:#000;
    padding:4px 10px;
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
}

.gallery-caption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    width:100% !important;
    color:#fff;
    padding:45px 14px 14px;
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
    background:linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.5),transparent);
    opacity:0;
    transform:translateY(20px);
    transition:.35s;
}

.gallery-item:hover .gallery-caption{
    opacity:1;
    transform:translateY(0);
}

.hs-video-placeholder{
    width:100%;
    height:100%;
    background:#000;
}

.hs-lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.95);
    z-index:99999;
    display:none;
    align-items:center;
    justify-content:center;
}

.hs-lightbox.active{
    display:flex;
}

.lightbox-content{
    width:85%;
    max-width:1200px;
    text-align:center;
}

.lightbox-media img{
    max-width:100%;
    max-height:78vh;
}

.lightbox-media iframe{
    width:100%;
    height:70vh;
    border:none;
}

.lightbox-media video{
    width:100%;
    max-height:78vh;
    display:block;
    margin:0 auto;
}

.lightbox-header{
    position:absolute;
    top:25px;
    right:25px;
    display:flex;
    gap:10px;
    z-index:9999;
}

.lightbox-header button{
    background:transparent;
    border:1px solid rgba(255,255,255,.2);
    color:#fff;
    padding:10px 16px;
    cursor:pointer;
    letter-spacing:1px;
    font-size:12px;
}

.lightbox-caption{
    color:#999;
    margin-top:18px;
    font-size:15px;
    letter-spacing:1px;
}

.lightbox-caption.hidden{
    display:none;
}

.nav-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    color:#fff;
    font-size:50px;
    cursor:pointer;
}

.prev-btn{left:30px}
.next-btn{right:30px}

@media(max-width:767px){
    .gallery-grid{grid-template-columns:repeat(1,1fr)}
    .lightbox-content{width:95%}
    .lightbox-media iframe{height:45vh}
    .nav-btn{font-size:34px}
}