.footer {

  display: grid;
  gap: var(--space-neutral);
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;

  section {

    border-top: 1px solid var(--color-grey);
    display: grid;
    gap: 0.7em;
    padding-bottom: var(--space-neutral);
    padding-top: var(--space-neutral);

    p {

      align-items: start;
      display: flex;
      flex-wrap: wrap;
      font-size: var(--font-size-xxx-small);
      gap: 0.25em;
      letter-spacing: var(--letter-spacing-loose);
      line-height: 1.4em;

      a {
        color: inherit;
        text-decoration: none;
        text-underline-offset: 0.06em;
      }

      span {
        display: none;
      }

      .icon {

        display: flex;
        gap: 0.2em;

        svg {
          align-self: center;
          max-height: 100%;
          overflow: visible;
          pointer-events: none;
          width: auto;
        }

        strong {
          color: inherit;
          font-weight: 600;
        }

      }

      .icon--basecamp svg {
        height: 1.35em;
      }

      .icon--37signals {

        display: none;

        svg {
          height: 1.25em;
        }

      }

    }

    ul {

      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-small);

      li {

        color: inherit;
        display: flex;
        font-size: var(--font-size-xxx-small);
        letter-spacing: var(--letter-spacing-loose);
        line-height: 1.4em;

        a {
          color: inherit;
          display: flex;
          font-weight: inherit;
          text-decoration: none;
          text-underline-offset: 0.06em;
          white-space: nowrap;
        }

      }

    }

  }

  @media(hover: hover) {

    section a {

      &:focus,
      &:hover {
        text-decoration: underline;
      }

    }

  }

  @media(min-width: 30em) {

    section p {

      span {
        display: initial;
      }

      .icon--37signals {
        display: flex;
      }

    }

  }

  @media(min-width: 56em) {

    section {

      align-items: center;
      grid-auto-flow: column;
      grid-column: 1 / -1;
      justify-content: space-between;
      padding-bottom: 0.35em;
      padding-top: 0.35em;

      ul li {
        line-height: 2.2em;
      }

    }

  }

  @media(min-width: 64em) {
    align-items: start;
    gap: var(--space-large);
    grid-template-columns: repeat(12, 1fr);
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }

}