html[data-theme] .portal-updates .portal-hero {
  background: #f4f8fd;
}
html[data-theme="dark"] .portal-updates .portal-hero {
  background: #14263e;
}
html[data-theme] .portal-updates .portal-hero::before {
  background: url('/assets/hero-panorama-20261010-02.jpg') right center / auto 100% no-repeat;
  opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .12) 28%, rgba(0, 0, 0, .38) 46%, rgba(0, 0, 0, .75) 58%, #000 68%, #000), linear-gradient(180deg, transparent, #000 8%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .12) 28%, rgba(0, 0, 0, .38) 46%, rgba(0, 0, 0, .75) 58%, #000 68%, #000), linear-gradient(180deg, transparent, #000 8%, #000 85%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
html[data-theme] .portal-updates .portal-hero::after,
html[data-theme] .portal-updates .portal-hero-grid {
  display: none;
}
html[data-theme] .portal-updates .portal-hero-meta {
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 12px;
  background: rgba(244, 248, 253, .87);
  backdrop-filter: blur(8px);
}
html[data-theme="dark"] .portal-updates .portal-hero-meta {
  border-color: rgba(255, 255, 255, .15);
  background: rgba(20, 38, 62, .87);
}
@media (max-width: 760px) {
  html[data-theme] .portal-updates .portal-hero::before {
    background-position: 90% center;
    -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, .3) 65%, #000 90%, #000), linear-gradient(180deg, transparent, #000 8%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, .3) 65%, #000 90%, #000), linear-gradient(180deg, transparent, #000 8%, #000 85%, transparent);
  }
}