.socials {
  border-bottom: 1px solid var(--color-iron-300);
  border-top: 1px solid var(--color-iron-300);
  padding-bottom: var(--baseline);
  padding-top: var(--baseline);
  row-gap: var(--baseline-sm);
  display: flex;
  flex-direction: column;
  height: auto;

  >.icons {
    display: flex;
    font-size: var(--font-size-xl);
    line-height: 0;
    margin: 0px -0.5rem;

    >a {
      align-items: center;
      display: flex;
      height: 3rem;
      justify-content: center;
      width: 3rem;
      color: var(--color-downriver-400);
    }
  }
}

@media (min-width: 64rem) {
  .socials {
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }
}