/* Pied de page ——————————————————————— */
.main-footer {
  align-items: baseline;
  display: grid;
  font-size: var(--fs-footer);
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "button button"
    "address menu"
    "info info";
  margin-inline: var(--space-20);
  padding-block: var(--space-16);

  > address p {
    margin-block: 0;
    font-style: normal;
  }

  > address {
    grid-area: address;
  }

  > ul {
    grid-area: menu;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .btn {
    grid-area: button;
    justify-self: center;
    margin-block-end: var(--space-32);
  }
}

@media (width > 720px) {
  .main-footer {
    padding-inline: 0;
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas:
      "address address menu menu button button button button"
      "info info info info info info info info";

    .btn {
      grid-area: button;
      justify-self: end;
    }
  }
}

.site-info {
  border-top: 1px solid var(--color-meta-text);
  font-size: var(--font-size-100);
  margin-block-start: var(--space-32);
  grid-area: info;

  p {
    margin-block-start: var(--space-4);
  }
}