@charset "UTF-8";

header {
  display: grid;
  grid-auto-flow: column dense;
  grid-auto-columns: auto;

  border-bottom: var(--size-4xs) solid var(--color-dark);
  padding: var(--size-s);
}
header img {
  width: 3rem
}

footer {
  display: grid;
  grid-auto-flow: row dense;
  grid-auto-rows: auto;

  border-top: var(--size-4xs) solid var(--color-dark);
  padding: var(--size-s);

  text-align: center;
}
footer img {
  display: block;
  width: 3rem;
  margin: 0 auto;
}
footer a {
  text-decoration: underline solid;
}

@media only screen and (min-width: 320px) {

}

@media only screen and (min-width: 480px) {

}

@media only screen and (min-width: 640px) {
  footer {
    grid-auto-flow: column;
    grid-template-columns: auto 1fr auto auto;
    gap: var(--size-s);
    align-items: center;
    text-align: left;
  }
}

@media only screen and (min-width: 980px) {
  header {
    padding-left: calc(50vw - var(--viewport-l) /2);
    padding-right: calc(50vw - var(--viewport-l) /2);
  }
  main {
    padding: 0 calc(50vw - var(--viewport-l) /2);
  }
  footer {
    padding-left: calc(50vw - var(--viewport-l) /2);
    padding-right: calc(50vw - var(--viewport-l) /2);
  }
}