.social {
  @include grid-column;
  text-align: right;

  @include breakpoint(medium) {
    width: calc(100% / 3);
  }

  ul {
    margin: 0;
  }

  li {
    display: inline-block;
  }

  a {
    font-size: rem-calc(24);
    margin: 0 calc($line-height / 2);
    text-decoration: none;

    &:hover {
      @include brand-color;
    }
  }
}