/* The four full-screen pictures at the top of the home page (FrontPage.astro).
   - No line between them (style.css and dark-theme.css draw a 4px bottom border).
   - A soft shade over each picture, darkest behind the white text, so the text stays
     readable on bright pictures. isolation makes the section its own layer, so the shade
     (z-index -1) lies above the picture but below the text, without moving anything.
   panels.js finishes a half-done scroll so one picture fills the screen. */
main section.panel.fullheight {
  border-bottom: 0;
  isolation: isolate;
}
main section.panel.fullheight::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.15) 85%, rgba(0, 0, 0, 0) 100%);
}
/* Small screens: the text runs across the whole width, in the middle of the picture. */
@media (max-width: 768px) {
  main section.panel.fullheight::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 75%, rgba(0, 0, 0, 0.2) 100%);
  }
}