45 lines
No EOL
1.1 KiB
CSS
Executable file
45 lines
No EOL
1.1 KiB
CSS
Executable file
/* 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;
|
|
}
|
|
} |