.hero-category-title{
    color: white;
}

.media-upcoming .container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.media-upcoming .section-title-left{
    text-align:left;
    margin-bottom:30px;
    font-size:2rem;
    font-weight:bold;
}

.media-grid{
    columns:3;
    column-gap:20px;
}

.media-grid img,
.media-grid video{
    width:100%;
    margin-bottom:20px;
    border-radius:10px;
    break-inside:avoid;
    cursor:pointer;
    transition:transform .3s ease;
}

.media-grid img:hover{
    transform:scale(1.02);
}

@media (max-width: 900px){
    .media-grid{
        columns:2;
    }
}

@media (max-width: 500px){
    .media-grid{
        columns:1;
    }
}