/* Блок «Отчёты», вариант 4 — «Рисунки на бумаге»: раскладка и тексты варианта 3 (reports_3.css),
   вместо карточек-инфографики у каждого шага — небольшой рисунок: журнал класса на скотче,
   отчёт со скрепкой, листок в клетку с карандашом; пометки фиолетовой ручкой — как «бесплатно» и «Учителям». */

.r4 .r3-step{ display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "ico" "who" "txt"; align-content: start; }
.r4 .r3-who{ grid-area: who; margin-top: 10px; }
.r4 .r3-txt{ margin-top: 18px !important; }
.r4 .r3-txt{ grid-area: txt; margin-top: 12px; }
.r4 .r3-step + .r3-step .r3-who::before{ content: none; }
.r4 .r3-steps{ row-gap: 48px; }

.r4-ico{ grid-area: ico; display: block; width: 190px; margin-left: -16px; }
.r4-art{ display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 14px #4a33a01f) drop-shadow(0 1px 1px #24243e14); }
.r4-art text{ font-family: inherit; }

@media (min-width: 700px){
  .r4 .r3-step{ grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "ico who" "ico txt"; grid-template-rows: auto 1fr; column-gap: 36px; }
  .r4 .r3-who{ margin-top: 18px; }
  .r4 .r3-txt{ max-width: 560px; }
  .r4-ico{ width: 200px; margin-left: -10px; }
}
@media (min-width: 1000px){
  .r4 .r3-steps{ grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; row-gap: 0; margin-top: 36px; }
  .r4 .r3-step{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "ico" "who" "txt"; grid-template-rows: none; }
  .r4 .r3-who{ margin-top: 14px; max-width: none; }
  .r4 .r3-txt{ margin-top: 14px; max-width: none; }
  .r4-ico{ width: 232px; margin-left: -18px; }
}
@media (min-width: 1200px){
  .r4 .r3-steps{ grid-template-columns: repeat(3, 336px); column-gap: 56px; }
}

/* Пометки ручкой дорисовываются, когда блок попадает на экран (как в «Олимпиада — это…»). */
@media (prefers-reduced-motion: no-preference){
  .r4.is-seen .r4-pen{ stroke-dasharray: 1; animation: r4-draw .7s cubic-bezier(.2, .75, .2, 1) both; }
  .r4.is-seen .r3-s1 .r4-pen{ animation-delay: .2s; }
  .r4.is-seen .r3-s2 .r4-pen{ animation-delay: .5s; }
  .r4.is-seen .r3-s3 .r4-pen{ animation-delay: .8s; }
}
@keyframes r4-draw{ from{ stroke-dashoffset: 1; } to{ stroke-dashoffset: 0; } }