.media-section {

    padding: 60px 20px;

    text-align: center;

}



.media-title {

    font-size: 2.5rem;

    margin-bottom: 40px;

    letter-spacing: 2px;

}



.media-grid {

    display: grid;

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

    gap: 30px;

    max-width: 1200px;

    margin: 0 auto;

}



.media-card {

    text-decoration: none;

    color: white;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.media-card:hover {

    transform: translateY(-8px);

}



.media-image img {

    width: 100%;

    border-radius: 8px;

    transition: opacity 0.3s ease;

}



.media-card:hover .media-image img {

    opacity: 0.85;

}



.media-info {

    margin-top: 15px;

}



.media-info h2 {

    font-size: 1.2rem;

    margin-bottom: 5px;

}



.media-year {

    font-size: 0.9rem;

    color: #ccc;

}



/* Responsive tweak */

@media (max-width: 600px) {

    .media-title {

        font-size: 2rem;

    }

}

.media-filter {

    margin-bottom: 40px;

}



.media-filter a {

    margin: 0 10px;

    text-decoration: none;

    color: #ccc;

    font-weight: bold;

}



.media-filter a:hover {

    color: white;

}



.media-image {

    position: relative;

}



.media-badge {

    position: absolute;

    top: 10px;

    right: 10px;

    background: #111;

    padding: 5px 10px;

    font-size: 0.7rem;

    letter-spacing: 1px;

    border-radius: 4px;

}