2021-03-04 01:20:39 +01:00
|
|
|
.section {
|
2021-03-21 22:49:39 +01:00
|
|
|
composes: wide from '../components/Layout.module.css';
|
2021-03-04 01:20:39 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.section:not(:first-child) {
|
|
|
|
margin-top: calc(var(--spacer) * 3);
|
|
|
|
}
|
|
|
|
|
|
|
|
.articles,
|
|
|
|
.photos {
|
|
|
|
display: grid;
|
|
|
|
gap: var(--spacer);
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: 40rem) {
|
|
|
|
.articles {
|
|
|
|
gap: calc(var(--spacer) * 1.5);
|
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.articles:first-of-type h1 {
|
2021-03-04 22:53:35 +01:00
|
|
|
font-size: var(--font-size-h3);
|
2021-03-04 01:20:39 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.articlesLast {
|
|
|
|
margin-top: calc(var(--spacer) * 1.5);
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: 40rem) {
|
|
|
|
.articlesLast {
|
|
|
|
gap: calc(var(--spacer) * 1.5);
|
|
|
|
grid-template-columns: repeat(3, 1fr);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.photos {
|
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: 40rem) {
|
|
|
|
.photos {
|
|
|
|
gap: calc(var(--spacer) * 1.5);
|
2021-03-21 22:49:39 +01:00
|
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
2021-03-04 01:20:39 +01:00
|
|
|
}
|
|
|
|
}
|