// Article Box
//
// Single box representing a single article. Used in articles grid. Article box is always 100% width and will adapt to its parent width.
//
// Markup:
// <div class="article" style="background: #1428aa url('./../build/assets/images/suit-image.png') center/cover no-repeat;">
//   <a href="#" class="article__link"></a>
//   <div class="article__metadata">
//     <div class="article__date">
//       10 Jun 2018
//     </div>
//     <h2 class="article__title">
//       <a class="article__title-link" href="#">Lorem ipsum dolor sit amet.</a>
//     </h2>
//   </div>
// </div>
//
// Styleguide Components.Article.article-box
.article {
  font-family: $primary-font-stack;
  background-color: $primary-accent-color;
  margin-bottom: 25px;
  height: 180px;
  position: relative;
  transform: scale(1);
  transition: $transition-time all;
  display: block;

  &::after {
    content: "";
    display: block;
    position: absolute;
    background-color: rgba($primary-accent-color, .8);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }

  @supports (background-blend-mode: multiply) {
    background-blend-mode: multiply;

    &::after {
      display: none;
    }
  }

  &:hover {
    transform: scale(1.05);
  }

  @include breakpoint-min(500) {
    height: 249px;
  }

  @include breakpoint-min($lg-desktop-breakpoint) {
    height: 294px;
  }

  @include breakpoint-min(1300) {
    height: 321px;
  }

  &__link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &__image {
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &__metadata {
    padding: 15px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    pointer-events: none;
  }

  &__date {
    font-weight: 700;
    text-transform: uppercase;
    font-size: rem(11);
    color: $primary-bg-color;

    @include breakpoint-min($desktop-breakpoint) {
      font-size: rem(14);
    }
  }

  &__title {
    color: $secondary-accent-color;
    max-width: 275px;
    font-weight: 700;
  }
}