.site-container {
  display: grid;
  grid-template-columns: 2.5% 1fr 2.5%;
  grid-template-rows: auto 1fr 2.5%;
  grid-template-areas:
    "header header header"
    "page-container page-container page-container"
    "footer footer footer";
  min-block-size: calc(100vh - 4em);
  border-block-start: 0;

  @include mq("large") {
    margin-block-end: 2em;
    grid-template-areas:
      "header header header"
      ". page-container ."
      "footer footer footer";
    border: 2px solid black;
    margin-inline: 2em;
  }

  &--homepage {
    align-items: center;
    grid-template-rows: auto 2.5%;
    grid-template-areas:
      "page-container page-container page-container"
      "footer footer footer";
    margin: 2em;

    @include mq("large") {
      border: 2px solid black;
      grid-template-areas:
        ". page-container ."
        "footer footer footer";
    }
  }

  &--list,
  &--section {
    align-items: center;
  }
}