.category-hero[data-category='finance'] {
  --category-hero-image: url('/resources/pic/categories/finance-hero.webp');
}

.category-hero[data-category='life'] {
  --category-hero-image: url('/resources/pic/categories/life-hero.webp');
}

.category-hero[data-category='tools'] {
  --category-hero-image: url('/resources/pic/categories/tools-hero.webp');
}

.category-hero[data-category='math'] {
  --category-hero-image: url('/resources/pic/categories/math-hero.webp');
}

.category-hero[data-category='science'] {
  --category-hero-image: url('/resources/pic/categories/science-hero.webp');
}

/* Shared category hero. Set data-category and --category-hero-image per category. */
.hero.category-hero[data-category] {
  --category-hero-image-tint: transparent;
  min-height: 220px;
  padding: 30px 28px;
  background-color: var(--color-surface);
  background-image:
    linear-gradient(
      90deg,
      var(--color-surface) 0%,
      var(--color-surface) 45%,
      color-mix(in srgb, var(--color-surface) 92%, transparent) 57%,
      transparent 82%
    ),
    linear-gradient(var(--category-hero-image-tint), var(--category-hero-image-tint)),
    var(--category-hero-image, none);
  background-position:
    center,
    center,
    right center;
  background-size:
    cover,
    cover,
    auto 100%;
  background-repeat: no-repeat;
}

.hero.category-hero h1 {
  max-width: 75%;
}

.hero.category-hero .lead {
  max-width: 62%;
}

@media (prefers-color-scheme: dark) {
  .hero.category-hero[data-category] {
    --category-hero-image-tint: #0d11174d;
  }
}

@media (max-width: 768px) {
  .hero.category-hero[data-category] {
    min-height: 340px;
    padding: 24px 20px 155px;
    background-image:
      linear-gradient(
        180deg,
        var(--color-surface) 0%,
        var(--color-surface) 53%,
        color-mix(in srgb, var(--color-surface) 70%, transparent) 65%,
        transparent 86%
      ),
      linear-gradient(var(--category-hero-image-tint), var(--category-hero-image-tint)),
      var(--category-hero-image, none);
    background-position:
      center,
      center,
      right bottom;
    background-size:
      cover,
      cover,
      auto 175px;
  }

  .hero.category-hero h1,
  .hero.category-hero .lead {
    max-width: 100%;
  }
}