/* Homepage lead and supporting stories. The layout preview has its own styles. */
#hero.hero-grid { grid-template-columns: minmax(0, 1fr); }
#hero .hero-main { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
#hero .hero-media { padding: 28px 0 28px 58px; }
#hero .hero-side {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 22px;
  padding: 22px 0 26px;
}
#hero .hero-side::before, #hero .hero-side::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 100vw;
  background: var(--black); pointer-events: none;
}
#hero .hero-side::before { right: 100%; }
#hero .hero-side::after { left: 100%; display: block; }
#hero .side-title { grid-column: 1 / -1; margin-bottom: 8px; }
#hero .side-item { grid-template-columns: minmax(100px, 38%) minmax(0, 1fr); border-top: 1px solid #2c2c2c; gap: 12px; }
#hero .side-item h3 { font-size: clamp(17px, 1.7vw, 21px); }
@media (max-width: 1080px) {
  #hero .hero-side { margin: 0; padding: 22px 0 26px; }
  #hero .side-item { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  #hero .hero-main { grid-template-columns: minmax(0, 1fr); }
  #hero .hero-media { padding: 22px 0; }
  #hero .hero-side { grid-template-columns: minmax(0, 1fr); padding: 22px 0; }
  #hero .side-item { grid-template-columns: 112px minmax(0, 1fr); }
  #hero .side-item h3 { font-size: 19px; }
}