@import 'variables';
@import 'mixins';

.section {
  @media (min-width: $screen-md) {
    @include breakoutviewport;
  }
}

.section:not(:first-child) {
  margin-top: $spacer * 3;
}

.articles,
.photos {
  display: grid;
  gap: $spacer;
}

.articles {
  @media (min-width: $screen-sm) {
    gap: $spacer * 2;
    grid-template-columns: repeat(2, 1fr);
  }
}

.articles:first-of-type h1 {
  font-size: $font-size-h3;
}

.articlesLast {
  margin-top: $spacer * 1.5;

  @media (min-width: $screen-sm) {
    gap: $spacer * 1.5;
    grid-template-columns: repeat(3, 1fr);
  }
}

.photos {
  grid-template-columns: repeat(2, 1fr);

  @media (min-width: $screen-sm) {
    gap: $spacer * 1.5;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

.title {
  composes: pagetitle from '../components/templates/Page.module.scss';
  margin-left: 0;
  margin-right: 0;

  a {
    margin: 0;
    color: $text-color-light;
  }
}