// ==========================================================================
// Secondary
// ==========================================================================

.secondary {
  background-color: $color-secondary;

  @include breakpoint(l) {
    background-color: inherit;
  }
}

.secondary-photo {
  display: block;
  margin: 0 auto 6%;
  width: 75%;

  @include breakpoint(s) {
    float: right;
    margin: 0 0 3% 3%;
    width: 150px;
  }

  @include breakpoint(l) {
    margin: 0 0 6%;
    width: 100%;
  }
}

.secondary-twitter--link {

  &:hover {

    .secondary-twitter--icon {

      .icon-foreground {
        fill: $color-link--color__hover;
      }
    }
  }

  &:focus {

    .secondary-twitter--icon {

      .icon-foreground {
        fill: $color-link--color__focus;
      }
    }
  }
}

.secondary-twitter--icon {
  position: relative;
  top: 4px;
  display: inline-block;
  margin-right: 4px;
  width: 20px;
  height: 20px;
  line-height: 0;
  transition: all 0.25s;
  backface-visibility: hidden;

  .icon {
    width: inherit;
    height: inherit;
  }

  .icon-foreground {
    fill: $color-link--color;
  }
}
