/* Schermafbeeldingen bij de stappen van een tutorial (<figure class="stap-beeld"> in build.mjs).
   Dit bestand laadt na style.css. De standaardwaarden staan daarom als terugvalwaarde in var(),
   zodat het thema ze kan overschrijven door de variabelen op :root in style.css te zetten:
   --fig-rand          rand rond de afbeelding            (standaard 1px solid #e2e8f0)
   --fig-radius        afronding van de hoeken            (standaard 12px)
   --fig-achtergrond   achtergrond terwijl ze laadt       (standaard #ffffff)
   --fig-rand-hover    rand bij hover                     (standaard 1px solid #cdd6e2)
   --fig-schaduw       schaduw, --fig-schaduw-hover bij hover
   --fig-focus         kleur van de focusrand (toetsenbord)
   --stap-inspring     inspringing van de staptekst, gelijk aan padding-left van .howto li (standaard 50px) */

/* Op de gsm over de volle breedte van de lijst, ook onder het stapnummer. */
.stap-beeld{margin:14px 0 0 calc(var(--stap-inspring, 50px) * -1);min-width:0;max-width:calc(100% + var(--stap-inspring, 50px))}
.stap-beeld a{display:block;border:var(--fig-rand, 1px solid #e2e8f0);border-radius:var(--fig-radius, 12px);overflow:hidden;background:var(--fig-achtergrond, #ffffff);box-shadow:var(--fig-schaduw, 0 1px 2px rgba(15,26,43,.05));transition:border-color .15s,box-shadow .15s}
.stap-beeld a:hover{border:var(--fig-rand-hover, 1px solid #cdd6e2);box-shadow:var(--fig-schaduw-hover, 0 6px 20px rgba(15,26,43,.07),0 1px 3px rgba(15,26,43,.05))}
.stap-beeld a:focus-visible{outline:2px solid var(--fig-focus, #2f74e0);outline-offset:2px}
.stap-beeld img{display:block;width:100%;max-width:100%;height:auto}
@media (min-width:640px){
  .stap-beeld{margin-left:0;max-width:100%}
}
@media print{
  .stap-beeld{margin-left:0;max-width:100%;break-inside:avoid}
  .stap-beeld a{box-shadow:none}
}