Add media queries for grid tour styling.
This commit is contained in:
parent
771e69c631
commit
43ac3c9cf3
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue