$featured-article-text-color: $white;
$featured-article-border: rem-calc(1) solid $white;
$featured-article-links-border: rem-calc(1) solid $light-gray;
$featured-article-side-links-height: rem-calc(450);

// big feature
$featured-article-big-bg: url('https://placehold.it/600?text=Big+Feature') no-repeat center center;
$featured-article-title-size-big: rem-calc(28);
$featured-article-author-size-big: rem-calc(18);

// small feature
$featured-article-small-bg: url('https://placehold.it/200?text=Small+Feature') no-repeat center center;
$featured-article-title-size-small: rem-calc(16);
$featured-article-author-size-small: rem-calc(12);

.featured-article-big {
  background: $featured-article-big-bg;
  background-size: cover;
  height: $featured-article-side-links-height;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: rem-calc(10);
  border-right: $featured-article-border;

  .featured-article-text {
    .featured-article-title {
      font-size: $featured-article-title-size-big;
      font-weight: bold;
      line-height: rem-calc(30);
      .author {
        font-size: $featured-article-author-size-big;
      }
    }
    p {
      color: $featured-article-text-color;
      margin-bottom: 0;
    }
  }
}

.featured-article-small-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: $featured-article-side-links-height;

  :last-child .featured-article-small {
    border-bottom: 0;
  }
}

.featured-article-small {
  background: $featured-article-small-bg;
  height: $featured-article-side-links-height / 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: rem-calc(10);
  border-bottom: $featured-article-border;

  :last-child {
    border-bottom: 0;
  }

  .featured-article-text {
    .featured-article-title {
      font-size: $featured-article-title-size-small;
      font-weight: bold;
      line-height: rem-calc(15);
      max-height: rem-calc(45);
      overflow: hidden;
      text-overflow: ellipsis;
    }
    p {
      color: $featured-article-text-color;
      margin-bottom: 0;
    }
  }
}

.featured-article-links-container {
  border: $featured-article-links-border;
  background-color: $white;
  height: $featured-article-side-links-height;
  overflow: scroll;
}

.featured-article-links,
.featured-article-links-header {
  padding: rem-calc(10);
  border-bottom: $featured-article-links-border;

  &:last-child {
    border-bottom: 0;
  }
}

.featured-article-links-header {
  font-weight: 600;
  text-transform: uppercase;
}
