/* Vaiheet kuvan vieressä. Numero tulee CSS-laskurista, jotta lista pysyy semanttisena
   <ol>-listana eikä numeroa tarvitse ylläpitää sisällössä. */
.mt-steps__layout{display:grid;gap:2rem;align-items:start}
.mt-steps__media{position:relative;overflow:hidden;border-radius:var(--mt-radius);aspect-ratio:31/18;background:var(--mt-mist)}
.mt-steps__media img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.mt-steps__play{position:absolute;inset:0;display:grid;place-items:center;color:var(--mt-white)}
.mt-steps__play .mt-icon{box-sizing:content-box;padding:1.4375rem;border-radius:50%;background:var(--mt-coral-strong);transition:transform var(--mt-transition)}
.mt-steps__play:hover .mt-icon{transform:scale(1.06)}
.mt-steps__body{display:flex;flex-direction:column;gap:1.125rem}
.mt-steps__list{display:grid;gap:1.125rem;margin:0;padding:0;list-style:none;counter-reset:mt-step}
.mt-steps__item{position:relative;min-block-size:1.75rem;padding-inline-start:2.625rem;counter-increment:mt-step}
.mt-steps__item::before{content:counter(mt-step);position:absolute;inset-inline-start:0;inset-block-start:0;display:grid;place-items:center;inline-size:1.75rem;block-size:1.75rem;border-radius:50%;background:var(--mt-navy);color:var(--mt-white);font:500 var(--mt-fs-sm)/1 var(--mt-font-body)}
.mt-steps__title{margin:0;font:500 var(--mt-fs-lg)/1.5 var(--mt-font-body)}
.mt-steps__text{margin:.125rem 0 0;font-size:var(--mt-fs-base);line-height:1.5;color:var(--mt-text)}
@container (min-width:56rem){.mt-steps__layout{grid-template-columns:minmax(0,31fr) minmax(0,29.4fr);gap:3.5rem}.mt-steps--plain .mt-steps__layout{grid-template-columns:minmax(0,48rem)}}