.article {
  @extend %section-type;
  padding-left : 0;
  padding-right: 0;

  &--hasRelated {
    border-bottom: 0;
    margin-bottom: 0;
  }

  &__content,
  &__header {

    width : 100%;
    margin: 0 auto;

    @include media-max(lg) {
      padding: 25px;
    }

    @include media-min(sm) {
      @include set-wCol(8);
    }
    @include media-min(lg) {
      @include set-wCol(6);
    }

    .h2 {
      flex         : 1 100%;
      margin-bottom: 25px;

      .article-event & {
        flex       : 1 85%;
        margin-left: 30px;
      }
    }
  }

  &__header {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;
    align-items    : center;

    @include media-min(md) {
      margin-bottom: 50px;
    }
  }

  &__content {
    @include media-min(lg) {
      margin-top: 50px;
    }

    * {
      max-width: 100%;
    }

    figcaption {
      @include rem-size(14);
      @extend %em;
      color     : $mediumgrey;
      margin-top: 10px;
    }
  }

  &__hero {
    height       : 400px;

    margin       : 0 auto;

    border-top   : solid 3px $black;
    border-bottom: solid 3px $black;

    overflow     : hidden;
    @extend %grid--lg;
    @include media-min(md) {
      @include set-wCol(10);

      border: solid 3px $black;
    }

    img {
      object-fit: cover;
    }

  }

  &__bundle {
    width          : 100%;

    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;

    margin-top     : 30px;
    @include media-max(lg) {
      margin-bottom: 20px;
    }

    * {
      @include rem-size(14);
      @extend %small;
    }

    .separate {
      margin-left: 5px;
    }

    &-info {
      display: flex;
    }

    a:hover {
      color: $darkgrey;
    }
  }

  &__share {
    margin    : 40px auto;
    text-align: center;

    @include media-min(lg) {
      margin: 130px auto 0;
    }
  }

  .share {
    list-style: none;

    li {
      display     : inline;
      margin-right: 10px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  &__date {
    display   : inline-block;
    @extend %m_border;

    background: $white;

    padding   : 10px 15px;
    text-align: center;

    .day {
      display    : block;

      @include rem-size(40);
      font-weight: 300;
    }
  }

  &-related {
    @extend %section-type;

    border-top : none;
    margin-top : 0;
    padding-top: 0;
  }
}