.link {
  @extend .col--half;
  background-color: map-deep-get($foundation-palette, primary);
  color: $white;
  padding-top: rem-calc(10);
  padding-bottom: rem-calc(10);
  position: relative;
  font-family: $header-font-family;
  margin-bottom: $global-margin;

  &:hover {
    color: $white;
    text-decoration: underline;
  }

  @include breakpoint (large) {
    &:before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-color: map-deep-get($foundation-palette, primary);
      position: absolute;
      left: -100%;
      z-index: -1;
      top: 0;
    }
  }


  &--tertiary {
    background-color: map-deep-get($foundation-palette, tertiary);

    &:before {
      background-color: map-deep-get($foundation-palette, tertiary);
      left: auto;
      right: -100%;
    }
  }
}