/** Type scale System */
/** 38px, 30px, 24px, 19px, 15px, 12.5px, 10px, 8px, 6px, 5px  */

/** Spacing System */
/** 160px, 96px, 80px, 64px, 48px, 40px, 32px, 24px, 16px, 12px, 8px, 4px, 2px */

/* Trending section starts */

.trending-section__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: minmax(0, 50%) minmax(0, 50%);
  gap: var(--spacing-12px);
  max-height: var(--spacing-350px);
}

.trending-section__grid__item {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--spacing-4px);
  overflow: hidden;
}

.trending-section__grid__item__link {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.trending-section__card {
  position: relative;
  width: 100%;
  height: 100%;
}

.trending-section__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 10%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

.trending-section__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.trending-section__card__text-container {
  max-width: 90%;
  position: absolute;
  bottom: var(--spacing-12px);
  left: var(--spacing-12px);
  z-index: 2;
}

.trending-section__card__text-container--carousel {
  bottom: var(--spacing-32px);
  left: var(--spacing-24px);
}

.trending-section__card__author {
  display: inline-block;
  font-size: var(--fs-15px);
  color: var(--text-primary-shade);
  margin-bottom: var(--spacing-4px);
}

.trending-section__card__author--carousel {
  font-size: var(--fs-15px);
}

.trending-section__card__title {
  font-size: var(--fs-19px);
  color: var(--text-primary);
  font-weight: 500;
}

.trending-section__card__title--carousel {
  font-size: var(--fs-24px);
  font-weight: 500;
}

.trending-section__card--carousel .news-card__img-fallback::before {
  font-size: var(--fs-38px);
}

/* Trending section ends */