@layer general {
  #main-footer {
    --flow-spacer: calc(var(--global-space) * 2);
    --flow-spacing: calc(var(--global-space) / 2);
    --text-color-alternative: var(--clr-neutral-200);

    padding-block-start: calc(var(--global-space) * 4);

    background-color: var(--clr-primary-400);
    color: var(--text-color-alternative);

    font-family: sans-serif;
  }
  #main-footer h2 {
    font-family: sans-serif;
    margin-block-end: calc(var(--global-space) / 2);
  }
  #main-footer ul {
    list-style: none;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--flow-spacing);
  }
  #main-footer a:hover {
    color: var(--clr-secondary-400);
  }
  #main-footer .wrapper .flow {
    --flow-spacer: var(--flow-spacing);
  }
  #main-footer .logo {
    text-align: center;

    margin-block-end: calc(var(--global-space) * 2);
  }
  #main-footer .logo img {
    margin-block-end: calc(var(--global-space) / 4);
  }
  #main-footer .logo h1 {
    color: var(--text-color-alternative);
    font-family: serif;
  }
  #main-footer .social-media .nav-link {
    font-size: var(--fs-regular);

    background-color: var(--text-color-alternative);
    color: var(--clr-primary-400);

    padding-block: calc(var(--global-space) / 4);
    padding-inline: calc(var(--global-space) / 2);

    border-radius: var(--border-radius);
  }
  #main-footer .social-media .nav-link:hover {
    background-color: var(--clr-secondary-400);
  }
  #copyright-notice {
    padding-block: var(--global-space);

    border-block-start: 1px solid hsl(0, 0%, 100%, 0.5);
  }
  #nss-link a {
    color: var(--clr-neutral-200);
    text-decoration: none;
  }
}