.footer {
  display: grid;
  gap: var(--space-neutral);
  margin-inline: var(--space-medium);
  position: relative;
}

.footer section {
  border-top: 1px solid var(--color-grey);
  display: grid;
  gap: 0.7em;
  padding-block: var(--space-neutral);
}

.footer section p,
.footer section ul {
  font-size: var(--font-size-xxx-small);
  letter-spacing: var(--letter-spacing-loose);
  line-height: 1.6em;
}

.footer section p .icon {
  display: inline-block;
}

.footer section p .icon svg {
  display: inline-block;
  height: 1.25em;
  max-height: 100%;
  overflow: visible;
  pointer-events: none;
  vertical-align: -0.2625em;
  width: auto;
}

.footer section p .icon strong {
  color: inherit;
  display: inline-block;
}

.footer section p .icon.icon--37signals strong {
  margin-left: -0.1375em;
}

.footer section p .icon.icon--basecamp strong {
  margin-left: -0.075em;
}

.footer section p .icon.icon--fizzy svg {
  height: 1.1em;
  vertical-align: -0.1875em;
}

.footer section p .icon.icon--fizzy strong {
  margin-left: -0.075em;
}

.footer section p .icon.icon--hey svg {
  height: 1.275em;
  vertical-align: -0.25em;
}

.footer section p .icon.icon--hey strong {
  margin-left: -0.1375em;
}

.footer section ul {
  display: flex;
  gap: var(--space-medium);
}

.footer section a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}



@media(hover: hover) {

  .footer section p a:focus strong,
  .footer section p a:hover strong,
  .footer section ul a:focus,
  .footer section ul a:hover {
    text-decoration: underline;
  }

}



@media(min-width: 64em) {

  .footer {
    align-items: start;
    gap: var(--space-large);
    grid-template-columns: repeat(12, 1fr);
    margin-inline: var(--space-neutral);
  }

  .footer section {
    grid-column: 1/-1;
  }

}



@media(min-width: 75em) {

  .footer section {
    grid-auto-flow: column;
    justify-content: space-between;
    padding-block: 0.5em;
  }

}