/* Slides shown one at a time (15.928, kit/slides.js): a picture on top, the title and the words under it, dots and
   arrows. The picture is the slide's own; the frame, the turning and the dots are here. */
.slides { display: flex; flex-direction: column; gap: var(--sp-200); outline: none; min-width: 0; }
.slides-view { position: relative; overflow: hidden; container-type: inline-size; touch-action: pan-y; }
.slides-track { display: flex; transition: transform var(--dur-zoom) var(--ease-out); }
.slides-track.slides-held { transition: none; }
.slides-page { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-300); }
.slides-pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-xl); display: grid;
  place-items: center; background: var(--a-100); }
.slides-words { display: flex; flex-direction: column; gap: var(--sp-100); padding-inline: var(--sp-300); text-align: center; }
.slides-words h3 { margin: 0; font-family: var(--font-h); font-size: var(--fs-h); line-height: 1.25; font-weight: var(--fw-bold); }
.slides-words p { margin: 0; color: var(--ink2); font-size: var(--fs); line-height: 1.5; }
/* the arrows stand at the middle of the picture: its height is three quarters of the width */
.slides-arrow { position: absolute; top: calc(37.5cqw - var(--h-field) / 2); width: var(--h-field); height: var(--h-field);
  border-radius: 50%; background: color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter: blur(var(--sp-100));
  box-shadow: var(--sh-raised); transition: opacity var(--dur-pop); }
.slides-back { left: var(--sp-150); }
.slides-next { right: var(--sp-150); }
.slides-arrow:disabled { opacity: 0; pointer-events: none; }
.slides-dots { display: flex; justify-content: center; gap: var(--sp-075); }
.slides-dot { width: var(--sp-100); height: var(--sp-100); padding: 0; border: 0; border-radius: var(--r-full);
  background: var(--a-300); cursor: pointer; transition: width var(--dur-fold) var(--ease-out), background var(--dur-fold); }
.slides-dot.on { width: var(--sp-300); background: var(--acc); }
@media (hover: none) { .slides-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .slides-track, .slides-dot { transition: none; } }