.media-gallery{
    padding:120px 0;
}

.gallery-filters{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;

    margin:50px 0;
}

.filter-btn{

    border:none;

    padding:12px 24px;

    border-radius:50px;

    background:#f5f5f5;

    cursor:pointer;

    transition:.3s;
}

.filter-btn.active,
.filter-btn:hover{

    background:var(--primary);
    color:#fff;
}

.gallery-grid{

    display:grid;

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

    gap:25px;

}

.gallery-item{

    position:relative;

    height:280px;

    border-radius:20px;

    overflow:hidden;

    cursor:pointer;

}

.gallery-item img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.5s;

}
.gallery-item:hover img{

    transform:scale(1.08);
}

.gallery-overlay,
.video-overlay{

    position:absolute;
    inset:0;

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

 opacity:0;

    transition:.4s;
}

.gallery-overlay{

    background:rgba(0,0,0,.45);
}

.video-overlay{

    background:rgba(0,0,0,.55);
}

.gallery-item:hover .gallery-overlay,
.gallery-item:hover .video-overlay{

    opacity:1;
}

.gallery-overlay i{

    color:#fff;
    font-size:30px;
}

.video-overlay i{

    width:80px;
    height:80px;

    border-radius:50%;

    background:#fff;

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

    color:var(--primary);

    font-size:24px;
}

@media(max-width:1200px){

    .gallery-grid{
        columns:3;
    }

}

@media(max-width:768px){

    .gallery-grid{
        columns:2;
    }

}

@media(max-width:576px){

    .gallery-grid{
        columns:1;
    }

}

.media-hero{

    position:relative;

    min-height:75vh;

    display:flex;
    align-items:center;

    background:url('https://images.unsplash.com/photo-1566073771259-6a8506099945?q=80&w=2000&auto=format&fit=crop');

    background-size:cover;
    background-position:center;

    overflow:hidden;

}

.media-hero-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgba(0,0,0,.75),
        rgba(0,0,0,.55)
    );

}

.media-hero-content{

    position:relative;
    z-index:2;

    max-width:800px;

    color:#fff;

}

.hero-badge{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

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

    backdrop-filter:blur(12px);

    font-weight:600;

    margin-bottom:25px;

}

.media-hero-content h1{

    font-size:clamp(3rem,6vw,5.5rem);

    line-height:1.1;

    margin-bottom:25px;

    font-weight:700;

}

.media-hero-content p{

    font-size:1.15rem;

    line-height:1.9;

    color:rgba(255,255,255,.92);

    max-width:650px;

    margin-bottom:35px;

}

.hero-actions{

    display:flex;
    gap:20px;
    flex-wrap:wrap;

}

.hero-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 35px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--accent)
    );

    color:#fff;

    font-weight:700;

    transition:.35s;

}

.hero-btn:hover{

    color:#fff;

    transform:translateY(-4px);

    box-shadow:
    0 20px 40px rgba(0,0,0,.25);

}

@media(max-width:768px){

    .media-hero{

        min-height:60vh;

        text-align:center;
    }

    .media-hero-content{

        margin:auto;
    }

    .hero-actions{

        justify-content:center;
    }

    .media-hero-content h1{

        font-size:2.8rem;
    }

}

@media(max-width:768px){

    .gallery-grid{

        grid-template-columns:1fr 1fr;

    }

    .gallery-item{

        height:220px;

    }

}

@media(max-width:576px){

    .gallery-grid{

        grid-template-columns:1fr;

    }

}