body > footer {
  border-top: var(--border-width) dashed var(--color-primary);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 2em var(--page-padding);
  row-gap: 1em;
  width: 100%;
}

body > footer h2 {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

@supports (background-clip: text) {
  body > footer .contact h2 {
    background-clip: text;
    background-image: linear-gradient(
      var(--brand-gradient-angle),
      var(--color-primary),
      var(--color-text)
    );
    color: transparent;
  }

  body > footer .legal-information h2 {
    background-clip: text;
    background-image: linear-gradient(
      var(--brand-gradient-angle),
      var(--color-text),
      var(--color-secondary)
    );
    color: transparent;
  }
}

body > footer .content {
  font-size: var(--small);
}

@media (min-width: 48rem) {
  body > footer {
    flex-direction: row;
  }
}