.footer {
  /* Based on Devil's Albatross logic for wrapping: https://9elements.com/blog/the-devils-albatros-an-algorithmic-layout-technique/ */
  --multiplier: calc((var(--centerflex-threshold, 38rem) - 100%) * 666);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-block-start: 1px solid rgb(255 255 255 / 0.15);
  color: var(--color-foreground-secondary);
  font-size: var(--font-size-0);
  line-height: 1.3;
  margin-block-start: var(--space);
  padding-block: var(--space);
  padding-inline: var(--space);
  text-align: center;

  &::before {
    flex-basis: max(0px, var(--multiplier));
    flex-grow: 666;
    margin: 0;
    content: "";
  }

  & > * {
    /* ↓ Half the value to each element, combining to make the whole */
    margin-block: calc(var(--centerflex-gap, 1rem) / 2);
    margin-inline: auto;

    &:first-child {
      order: -1;
    }
  }

  & a {
    transition: color 0.2s ease-in-out;

    &:hover {
      color: var(--color-foreground);
      text-decoration: underline;
    }
  }
}

.emoji {
  display: inline-block;
  color: var(--color-foreground);
  margin-inline-end: 0.25ch;
}

.links {
  display: flex;
  gap: 1.5ch;
  list-style-type: none;
}
