footer {
  padding-block: var(--space-m);

  nav {
    display: grid;
    gap: var(--space-3xs);

    ul.icons {
      display: flex;
      gap: var(--space-s);
      align-items: center;

      a {
        width: 50px;
        aspect-ratio: 1;
        border-radius: 50%;
        display: grid;
        place-content: center;
        transition: background-color .3s;

        img {
          transition: filter .3s;
        }

        &:is(:hover, :focus-visible) {
          background: var(--primary);
          img {
            filter: invert(1);
          }
        }
      }
    }
    ul.links {
      display: flex;
      gap: var(--space-xs);
      align-items: center;

      li {
        display: contents;

        &:not(:last-of-type)::after {
          content: '';
          background: var(--primary);
          height: 5px;
          aspect-ratio: 1;
          border-radius: 50%;
        }
      }
    }
  }
}