.page-footer {
  --logomark-height: 2em;
  --logomark-padding: 0;

  position: relative;
  padding: 3rem 1rem;
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='72' viewBox='0 0 36 72'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23d2fbf7' fill-opacity='1'%3E%3Cpath d='M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center -34px;
  color: var(--color-light);

  &::before {
    @include logomark;

    position: absolute;
    left: 50%;
    width: 2em;
    transform: translate(-50%, -100%);
    background-color: var(--color-background);
    color: var(--color-primary);
    font-size: 3rem;
    content: "S";
  }

  p:first-child {
    margin-top: 3rem;
    font-weight: var(--font-weight-strong);
    letter-spacing: 0.03em;
    text-align: center;
  }

  p a {
    color: inherit;
  }

  ul {
    grid-template-columns: repeat(auto-fit, minmax(12ch, auto));
  }

  .container > :last-child {
    margin-bottom: 0;
  }
}
