1
Fork 0

Add media queries for grid tour styling.

This commit is contained in:
Bauke 2023-07-01 11:40:45 +02:00
parent 771e69c631
commit 43ac3c9cf3
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
1 changed files with 10 additions and 2 deletions

View File

@ -3,8 +3,16 @@
.tours { .tours {
display: grid; display: grid;
gap: 16px; gap: 16px;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(var(--columns, 3), 1fr);
margin-top: 16px; margin-top: 16px;
@media (width <= 1200px) {
--columns: 2;
}
@media (width <= 800px) {
--columns: 1;
}
} }
.tour { .tour {
@ -21,7 +29,7 @@
.tour-description, .tour-description,
.tour-link { .tour-link {
grid-column: 1 / 3; grid-column: span 2;
} }
} }