.jr { padding: 80px 0; }   
@media (min-width: 48rem) { .jr { padding: 120px 0; } }
.jr__wrap { display: flex; flex-direction: column; gap: 56px; }
@media (min-width: 48rem) { .jr__wrap { gap: 80px; } }
.jr__head { max-width: 46rem; }
.jr__list { display: grid; grid-template-columns: minmax(0, 1fr); }
.jr__dot { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: calc(infinity * 1px);
  border: 1px solid var(--blue-ink); background: var(--tone, var(--bg)); color: var(--blue-ink); font-size: 1rem; line-height: 1; font-weight: 500;
  font-variant-numeric: tabular-nums; transition: background-color .4s var(--ease), color .4s var(--ease); }
.jr__title { font-size: 1.625rem; line-height: 1.2; letter-spacing: -.01em; font-weight: 500; text-wrap: balance; }
.jr__text { font-size: 1rem; line-height: 1.6; color: var(--fg-80); text-wrap: pretty; }
.jr__text a { color: var(--blue-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.jr__media { position: relative; overflow: hidden; border-radius: 16px; background: var(--paper-dark); }
.jr__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jr__marker { position: relative; }
.jr__marker::before, .jr__marker::after { content: ""; position: absolute; }
@media not all and (min-width: 80rem) {
  .jr__step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px; padding-bottom: 56px; }
  .jr__step:last-child { padding-bottom: 0; }
  .jr__marker { grid-column: 1; grid-row: 1 / span 3; }
  .jr__title { grid-column: 2; grid-row: 1; align-self: center; min-height: 48px; display: flex; align-items: center; }
  .jr__text { grid-column: 2; grid-row: 2; margin-top: 8px; }
  .jr__media { grid-column: 2; grid-row: 3; margin-top: 24px; aspect-ratio: 16 / 10; }
  .jr__marker::after { left: 23px; top: 56px; bottom: -48px; width: 2px; background: var(--fg-12); }       
  .jr__marker::before { left: 23px; top: 56px; bottom: -48px; width: 2px; background: var(--blue); z-index: 1;   
    transform-origin: top; }
  .jr__step:last-child .jr__marker::before, .jr__step:last-child .jr__marker::after { display: none; }
}
@media (min-width: 48rem) and (max-width: 79.99rem) { .jr__media { max-width: 36rem; } }
@media (min-width: 80rem) {
  .jr__list { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; }
  .jr__step { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .jr__media { grid-row: 1; aspect-ratio: 4 / 5; margin-bottom: 32px; }
  .jr__marker { grid-row: 2; height: 48px; margin-bottom: 28px; }
  .jr__title { grid-row: 3; margin-bottom: 12px; }
  .jr__text { grid-row: 4; }
  .jr__marker::after { left: 56px; right: -24px; top: 23px; height: 2px; background: var(--fg-12); }          
  .jr__marker::before { left: 56px; right: -24px; top: 23px; height: 2px; background: var(--blue); z-index: 1; transform-origin: left; }
  .jr__step:last-child .jr__marker::before, .jr__step:last-child .jr__marker::after { display: none; }
}
.jr.is-armed .jr__step { opacity: 0; transform: translateY(16px); }
.jr.is-armed .jr__marker::before { transform: scale(0); }
@media (min-width: 80rem) { .jr.is-armed .jr__marker::before { transform: scaleX(0); } }
@media not all and (min-width: 80rem) { .jr.is-armed .jr__marker::before { transform: scaleY(0); } }
.jr.is-in .jr__step { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i) * .12s); }
.jr.is-in .jr__marker::before { transform: none; transition: transform .45s var(--ease) calc(.35s + var(--i) * .3s); }
.jr.is-in .jr__dot { background: var(--blue-ink); color: var(--neutral-white); transition-delay: calc(.2s + var(--i) * .3s); }
@media (prefers-reduced-motion: reduce) { .jr__dot { background: var(--blue-ink); color: var(--neutral-white); transition: none; } }