/// ----------------------------------------------------------------------------
/// Dependencies
/// ----------------------------------------------------------------------------

@import "../../../sass/webpack_deps";





/// ----------------------------------------------------------------------------
/// Base styles
/// ----------------------------------------------------------------------------

.article {
  border-bottom: .1rem solid $color-gray;
  opacity: 1;
  overflow: hidden; // Prevent horizontal movement in iOS caused by .size-full images
  position: relative;

  .no-js & {
    border-bottom: 0;
  }

  &.is-loading {
    opacity: 0;
  }
}





/// ----------------------------------------------------------------------------
/// Element styles
/// ----------------------------------------------------------------------------

.article__container {
  @include container-padded;
  padding-bottom: gutter(static);
  padding-top: 4.4rem;
  position: relative;

  @media (min-width: $min-720) {
    padding-top: 12rem;
  }
}

.article__intro {
  @include container;
  margin-bottom: 3.4rem;
}

.article__author {
  @media (max-width: $max-600) {
    &::before {
      background-color: $color-red;
      content: "";
      display: block;
      height: .2rem;
      margin-bottom: 1.6rem;
      margin-top: 1.6rem;
      width: 4.8rem;
    }
  }

  @media (min-width: $min-600) {
    float: left;
    width: span(3);
  }
}

.article__header {
  @media (min-width: $min-600) {
    float: right;
    margin-left: gutter();
    width: span(9);
  }
}

.article__content {
  @media (min-width: $min-600) {
    margin-left: (span(3) + gutter());
    width: span(9);
  }
}

.article__footer {
  align-items: center;
  display: flex;
  max-width: span(6 static);

  .no-flexbox & {
    display: block;
  }

  .no-js & {
    display: none;
  }
}

.article__sponsor-ad {
  font-size: 1.4rem;
  line-height: (22 / 14);
  max-width: span(6 static);
  padding-bottom: .8rem;
  padding-top: .8rem;



  // Implementation detail

  .article & {
    margin-top: 4rem;
  }

  .no-js & {
    display: none;
  }
}