Eyecatcher Banner

.eyecatcher {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: $spacer-md;

  text-align: center;

  &--event {
    color: $eyecatcher-text-color;
    background-color: $eyecatcher-body-bg;
  }

  &--event__text {
    @extend %heading-font-bold;

    margin-bottom: 0;
    font-size: $font-size-base;
  }

  &--event__link {
    color: $eyecatcher-text-color;
    border: 0;

    &:hover,
    &focus {
      color: $eyecatcher-color-inverted;
    }
  }

  &--social {
    color: $eyecatcher-text-color;
    background-color: $eyecatcher-body-bg;

    .social-media-bar {
      margin-bottom: 0;
      font-size: $font-size-xl;
      color: $eyecatcher-color-inverted;
    }

    .social-media-bar__link {
      transition: standard-transition(color);

      .icon:hover,
      .icon:focus {
        background: $eyecatcher-text-color;
      }
    }
  }

  &--social__text {
    @extend %heading-font-bold;

    margin-bottom: $spacer-md;
    font-size: $font-size-base;
  }
}