|
|
|
|
@ -58,6 +58,32 @@
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.collection-view .view-content, |
|
|
|
|
.view-grid > .view-content { |
|
|
|
|
display: grid; |
|
|
|
|
grid-template-columns: 1fr; /* mobile: single column */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media (min-width: 600px) { |
|
|
|
|
.collection-view .view-content, |
|
|
|
|
.view-grid > .view-content { |
|
|
|
|
grid-template-columns: repeat(2, 1fr); /* tablet portrait: 2 across */ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media (min-width: 900px) { |
|
|
|
|
.collection-view .view-content, |
|
|
|
|
.view-grid > .view-content { |
|
|
|
|
grid-template-columns: repeat(3, 1fr); /* tablet landscape: 3 across */ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media (min-width: 1200px) { |
|
|
|
|
.collection-view .view-content, |
|
|
|
|
.view-grid > .view-content { |
|
|
|
|
grid-template-columns: repeat(4, 1fr); /* desktop: 4 across */ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
#toggle-facets { |
|
|
|
|
background-color: #574938; |
|
|
|
|
} |
|
|
|
|
|