/* Home hero slides; see pages/home.html. */
/* Phones: the whole 16:9 photo, untinted, edge to edge above the text (cancels the section's px-5 py-8). */
.hero-slides{position:relative;aspect-ratio:16/9;margin:-2rem -1.25rem 1.5rem}
.hero-slides~*{position:relative}
.hero-slide{position:absolute;inset:0}
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:left 40%}
.hero-slide+.hero-slide{opacity:0}
[dir=ltr] .hero-slide{transform:scaleX(-1)}
/* From sm: the photo fills the banner behind the text, tinted only on the text side.
   12:5 shows ~75% of the photo's height on wide screens; the text can still make it taller. */
@media (min-width:40rem){
  .hero{aspect-ratio:12/5;min-height:20rem}
  .hero-slides{position:absolute;inset:0;margin:0;aspect-ratio:auto}
  .hero-slides::after{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgb(15 68 136/.9) 35%,rgb(15 68 136/.55) 55%,rgb(15 68 136/0) 75%)}
  [dir=ltr] .hero-slides::after{background:linear-gradient(to right,rgb(15 68 136/.9) 35%,rgb(15 68 136/.55) 55%,rgb(15 68 136/0) 75%)}
  .hero-slides~:is(h1,p){text-shadow:0 1px 3px rgb(0 0 0/.45)}
}
@media (prefers-reduced-motion:no-preference){
  .hero-slide{animation:hero-fade 20s ease-in-out infinite}
  .hero-slide+.hero-slide{animation-delay:-10s}
}
@keyframes hero-fade{0%,45%{opacity:1}50%,95%{opacity:0}to{opacity:1}}