body > footer {
  text-align: center;
  color: White;
  background-color: var(--petrol);
}

body > footer a, body > footer a:active {
  color: White;
}

body > footer a:hover {
  color: White;
  background-color: var(--red);
}

body > footer a.logo:hover {
  background-color: inherit;
}

body > footer .logo {
  display: block;
  text-align: center;
  padding: 0.5rem;
}

body > footer .logo header {
  font-family: 'Niconne';
  font-size: 4rem;
}

body > footer .logo main {
  font-family: 'Spinnaker';
}

body > footer .logo ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

@media not all and (min-width: 60rem) {
  body > footer .logo ol li {
    display: inline-block;
  }
  body > footer .logo ol li:nth-last-child(n+2):after {
    content: " |";
  }
}

body > footer .imprint {
  list-style-type: none;
  margin: 0;
  padding: 0.5rem;
}

body > footer .links {
  list-style-type: none;
  margin: 0;
  padding: 0.5rem;
}

body > footer .copyright {
  padding: 0 0.5rem;
}

body > footer .attribution {
  padding: 0 0.5rem;
  font-size: smaller;
  color: Silver;
}

body > footer .attribution a, body > footer .attribution a:hover {
  color: Silver;
}

body > footer > *:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 60rem) {
  body > footer {
    display: grid;
    grid-template-areas: '  logo        imprint      links' 'copyright    copyright   copyright' 'attribution attribution attribution';
    grid-template-columns: 0.25fr 0.5fr 0.25fr;
    grid-gap: 1rem;
    align-items: center;
    max-width: 60rem;
    padding: 0 calc(50% - 30rem);
  }
  body > footer .logo {
    grid-area: logo;
    padding: 0.5rem 0 0 0.5rem;
  }
  body > footer .imprint {
    grid-area: imprint;
    padding: 0.5rem 0 0 0;
  }
  body > footer .links {
    grid-area: links;
    padding: 0.5rem 0.5rem 0 0;
  }
  body > footer .copyright {
    grid-area: copyright;
    margin: 0;
  }
  body > footer .attribution {
    grid-area: attribution;
    margin: 0;
  }
}

body > footer .social-media-icons {
  margin-top: 1em;
}

body > footer .social-media-icons a:hover, body > footer .social-media-icons a:active {
  background-color: transparent;
}