/* Base Video Grid Definition (Desktop) */
.video-grid {
    display: grid !important;
    /* Larger cards for better visibility */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: var(--spacing-lg) !important;
    padding: var(--spacing-lg) 4%;
    width: 100%;
}

/* Ensure cards inside grid take full width */
.video-grid .video-card {
    width: 100%;
    /* Override fixed width if any */
    flex: none;
    /* Override flex */
    aspect-ratio: 2/3;
    min-width: 160px;
}

/* Medium screens - slightly smaller cards */
@media (max-width: 1200px) {
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 20px;
    }
}

/* Tablet */
@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 16px;
        padding: var(--spacing-md) 3%;
    }
}

/* Mobile - 2 columns */
@media (max-width: 480px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: var(--spacing-sm) 16px;
    }
}