/*
  Vaihekorttien kuvat (Näin saat yrityksellesi uudet kotisivut).

  Kuva vuotaa kortin reunoihin negatiivisilla marginaaleilla, jotka vastaavat
  .steps-grid li:n paddingia (32px 28px 28px). Jos paddingia muutetaan
  style.css:ssä, nämä luvut on muutettava mukana — siksi ne on kirjoitettu
  auki eikä laskettu muuttujasta, jota ei ole olemassa.

  Numeropallo jää kuvan päälle. Se on vaalea ja ohutreunainen, joten
  valokuvan päällä se tarvitsee varjon erottuakseen — muuten pallo katoaa
  vaaleaan kohtaan kuvaa.

  Oma tiedosto, koska style.css on jo 2510 riviä.
*/

.step-photo {
  display: block;
  /* style.css:n perussääntö on img { max-width: 100% }, joka leikkaisi
     calc(100% + 56px):n takaisin sisältölaatikon leveyteen — kuva jäisi
     kortin paddingin sisään eikä vuotaisi reunoihin. */
  max-width: none;
  width: calc(100% + 56px);
  margin: -32px -28px 22px;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.steps-grid li .step-num {
  box-shadow: 0 2px 8px rgba(24, 24, 24, 0.18);
}