/* Popular-card auto pages: optional hero background image with readable overlay. v20261010a */
.page-hero--image {
  position: relative;
  background-color: #0b2a4a;
  background-image:
    linear-gradient(90deg, rgba(11, 42, 74, .94) 0%, rgba(11, 42, 74, .82) 45%, rgba(11, 42, 74, .45) 100%),
    var(--hero-img);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  min-height: 320px; display: grid; align-content: center;
  padding-top: 3rem; padding-bottom: 3rem;
}
.page-hero--image h1, .page-hero--image .breadcrumb, .page-hero--image .breadcrumb a { text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
@media (max-width: 720px) {
  .page-hero--image {
    background-image:
      linear-gradient(180deg, rgba(11, 42, 74, .55) 0%, rgba(11, 42, 74, .88) 70%),
      var(--hero-img);
    background-position: 82% center;
    min-height: 240px; align-content: end;
    padding-top: 2rem; padding-bottom: 1.6rem;
  }
}
.page-hero--image { border-bottom: 0; }
.page-hero--image h1 { color: #fff; }
.page-hero--image p.ta { color: #99f6e4; }
.page-hero--image .breadcrumb, .page-hero--image .breadcrumb a { color: rgba(255, 255, 255, .85); }
.page-hero--image .card-icon { background: rgba(255, 255, 255, .14); color: #5eead4; border: 1px solid rgba(255, 255, 255, .22); }