.news {
  background: var(--theme-color-950c);
  grid-area: news;
  border-radius: var(--border-radius-xs);
}

.news-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  padding: var(--padding-s);
}
.news-title {
  display: flex;
  font-family: var(--font-titles);
  font-size: var(--font-size-xl);
  margin: 0 var(--margin-s);
  color: var(--theme-color-200);
  background-image: linear-gradient(
    10deg,
    rgb(92, 137, 209) 0%,
    rgb(49, 135, 178) 10%,
    transparent 40%,
    transparent 100%
  );
  background-size: 60% 5%;
  background-repeat: no-repeat;
  background-position: left 1% bottom 0%;
  padding: var(--padding-xs);
}

.news-container {
  display: flex;
  flex-direction: row;
  padding: var(--padding-xs);
}

.news-thumbnail {
  display: block;
  position: relative;
  margin: auto 0;
}

.news-thumbnail img {
  width: 120px;
  height: 70px;
  box-shadow: 0 0 15px 0px var(--theme-color-200c);
  border-radius: var(--border-radius-xxs);
}

.news-thumbnail img:hover {
  box-shadow: 0 0 20px 0px var(--theme-color-500);
  cursor: pointer;
}

.news-details {
  font-size: var(--font-size-s);
  margin: auto 0;
  color: var(--white);
  padding-left: var(--padding-s);
  text-align: left;
}

.news-details--stats{
    font-size: 10px;
    padding: 5px 0;
}

.news-details--title {
  font-family: var(--font-general);
  display: -webkit-box;
  max-width: 100%;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.episode-thumbnail--news {
  display: block;
  width: 100%;
  height: inherit;
  padding: var(--padding);
}

.episode-thumbnail--news img {
  width: 100%;
  height: inherit;
  /*max-height: 112px;*/
  box-shadow: 0 0 15px 0px var(--theme-color-300);
}