.fm-exam {
  --fm-exam-numw: 52px;   
  --fm-exam-rx: 22px;     
  --fm-exam-rtop: 46px;   
  --fm-exam-cg: 10px;     
  --fm-exam-gap: 32px;    
  --fm-exam-photo: 132px; 
}

.fm-exam__steps { margin: 0; padding: 28px 18px 32px; list-style: none; border-radius: 12px; background: #FFFFFF; box-shadow: 0 8px 24px rgba(0, 0, 0, .05); }

.fm-exam__step {
  position: relative; display: grid; grid-template-columns: var(--fm-exam-numw) minmax(0, var(--fm-exam-photo)) minmax(100px, 1fr); column-gap: var(--fm-exam-cg);
  grid-template-areas: "num photo title" "num text text"; align-items: start;
}
.fm-exam__step + .fm-exam__step { margin-top: var(--fm-exam-gap); padding-top: var(--fm-exam-gap); }

.fm-exam__step + .fm-exam__step::after {
  content: ""; position: absolute; top: 0; left: calc(var(--fm-exam-numw) + var(--fm-exam-cg)); right: 0; height: 1px; background: var(--fm-line); pointer-events: none;
}

.fm-exam__step:not(:last-child)::before {
  content: ""; position: absolute; left: calc(var(--fm-exam-rx) - .5px); width: 1px; top: var(--fm-exam-rtop); bottom: calc(var(--fm-exam-gap) * -2 + 10px);
  background: var(--fm-bronze); pointer-events: none;
}
.fm-exam__step + .fm-exam__step:not(:last-child)::before { top: calc(var(--fm-exam-gap) + var(--fm-exam-rtop)); }

.fm-exam__num { grid-area: num; display: block; margin-top: -6px; font: 600 42px/1 "Jost", var(--fm-font-en); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fm-bronze); }

.fm-exam__photo { grid-area: photo; position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 12px; background: var(--fm-c-warm); }
.fm-exam__photo picture { display: block; width: 100%; height: 100%; }
.fm-root .fm-exam__photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }

.fm-exam__title { grid-area: title; align-self: center; margin: 0; font: 400 18px/round(1.5em, 1px) var(--fm-font-serif); letter-spacing: .04em; font-feature-settings: "palt"; color: var(--fm-text); }

.fm-exam__text { grid-area: text; margin: 16px 0 0; font-size: 16px; line-height: round(1.75em, 1px); color: #4F4C48; }

.fm-exam__notes { margin: 48px 0 0; padding: 0; list-style: none; max-width: var(--fm-measure); }
.fm-exam__notes > li { position: relative; padding-left: 20px; color: var(--fm-text-label); }
.fm-exam__notes > li + li { margin-top: 4px; }
.fm-exam__notes > li::before {
  content: ""; position: absolute; left: 1px; top: calc((var(--fm-lh-body) - 7px) / 2); width: 7px; height: 7px;
  background: radial-gradient(circle closest-side, var(--fm-c-mauve) 88%, rgba(187,144,167,0) 100%);
}

@media (min-width: 768px) {
  .fm-exam { --fm-exam-numw: 64px; --fm-exam-rx: 26px; --fm-exam-rtop: 54px; --fm-exam-cg: 24px; --fm-exam-gap: 36px; --fm-exam-photo: 176px; }
  .fm-exam__steps { padding: 40px 40px 44px; border-radius: 16px; }
  .fm-exam__step { grid-template-areas: "num photo title" "num photo text"; grid-template-rows: auto 1fr; }
  .fm-exam__num { margin-top: -7px; font-size: 50px; }
  .fm-exam__title { align-self: start; font-size: 20px; }
  .fm-exam__text { max-width: var(--fm-measure); margin-top: 8px; }
  .fm-exam__notes { margin-top: 64px; }
  .fm-exam__notes > li { font-size: 15px; line-height: round(1.9em, 1px); }
  .fm-exam__notes > li::before { top: calc((round(1.9em, 1px) - 7px) / 2); }
}


.fm-exam__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 48px 0 52px; }

.fm-exam__step,
.fm-exam__step + .fm-exam__step {
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "num" "photo" "title" "text"; grid-template-rows: auto auto auto 1fr;
  margin-top: 0; padding: 0 max(24px, calc((100% - 276px) / 2));
}
.fm-exam__step + .fm-exam__step { border-left: 1px solid var(--fm-line); } 
.fm-exam__step:not(:last-child)::before,
.fm-exam__step + .fm-exam__step:not(:last-child)::before,
.fm-exam__step + .fm-exam__step::after { content: none; }
.fm-exam__num { margin-top: -8px; font-size: 56px; }
.fm-exam__photo { justify-self: center; width: min(100%, 276px); margin-top: 24px; }
.fm-exam__title { margin-top: 28px; }
.fm-exam__text { margin-top: 12px; }
.fm-exam__notes { margin-top: 72px; }


@media print {
  .fm-exam__steps { box-shadow: none; }
  .fm-exam__step { break-inside: avoid; }
}