.study-next-entry {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: stretch;
  margin-bottom: 1.5rem;
  background: var(--mint);
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}

.study-next-entry-copy { padding: clamp(1.15rem, 3vw, 2.4rem); }
.study-next-entry h2 { font: 400 clamp(2rem, 4vw, 3.5rem)/1 var(--serif); margin: .6rem 0 .45rem; }
.study-next-entry h3 { font: 400 clamp(1.5rem, 3vw, 2rem)/1.1 var(--serif); margin: .65rem 0; }
.study-next-entry-copy > p:not(.eyebrow) { max-width: 44ch; }
.study-next-entry .primary-button { margin-top: .35rem; }
.study-next-preview { display: grid; grid-template-columns: 3fr 2fr; min-height: 11rem; background: var(--ink); gap: 3px; }
.study-next-preview img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.study-next-preview img:first-child { object-position: 74% 50%; }

.study-next-page { max-width: 1080px; }
.study-next-header { padding: .4rem 0 1.35rem; }
.study-next-header h1 { font-size: clamp(2.6rem, 7vw, 5rem); margin: .35rem 0 .6rem; }
.study-next-header > p:last-child { max-width: 58ch; margin: 0; }

.study-next-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.study-next-progress :is(a, li > div) {
  height: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: .55rem;
  min-height: 44px;
  padding: .55rem .8rem;
  background: var(--white);
  border-bottom: 2px solid var(--line);
}
.study-next-progress a { color: var(--green); }
.study-next-progress li[aria-current="step"] > * { background: var(--mint); border-bottom-color: var(--green); }
.study-next-progress li span { color: var(--rust); font-variant-numeric: tabular-nums; }
.study-next-progress li small { grid-column: 2; color: var(--muted); }

.study-next-activity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: 1rem clamp(1rem, 3vw, 2.25rem);
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.study-next-activity-head { grid-column: 1 / -1; }
.study-next-activity h2 { font: 400 clamp(2rem, 4vw, 3rem)/1.05 var(--serif); margin: .35rem 0 0; }
.study-next-activity :is(h2, h4)[tabindex="-1"] { scroll-margin-block-start: 6rem; }
.study-next-instructions p { margin: 0 0 .85rem; max-width: 62ch; }
.study-next-works { display: grid; gap: 1rem; grid-row: span 3; align-self: start; }
.study-next-work { margin: 0; }
.study-next-image { background: var(--paper); display: grid; place-items: center; }
.study-next-image img { display: block; width: 100%; height: auto; max-height: 380px; object-fit: contain; }
.study-next-work figcaption { display: grid; padding: .5rem 0 0; color: var(--muted); font-size: .8rem; }
.study-next-work cite { font: 400 1.25rem/1.2 var(--serif); color: var(--ink); }
.study-next-work figcaption a { text-decoration: underline; text-underline-offset: 3px; }

.study-next-check { border-top: 1px solid var(--line); padding-top: 1rem; }
.study-next-check h3 { font: 400 clamp(1.4rem, 3vw, 1.9rem)/1.13 var(--serif); margin: .45rem 0 .85rem; }
.study-next-check .game-options button { min-height: 44px; }
.study-next-feedback { padding: .8rem 1rem; background: var(--mint); border-left: 3px solid var(--green); }
.study-next-feedback h4 { margin: 0; font-weight: 700; }
.study-next-feedback p { margin: .45rem 0 0; }
.study-next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; }
.study-next-actions :is(a, button), .study-next-entry .primary-button { min-height: 44px; }
.study-next-actions .text-button { display: inline-flex; align-items: center; }
.study-next-position { color: var(--muted); font-size: .85rem; }
.study-next-save { text-align: right; }

.study-next-lab-illustration {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  place-items: center;
  grid-row: span 2;
  aspect-ratio: 2.4;
  background: var(--mint);
}
.study-next-lab-illustration i { display: block; width: 35%; aspect-ratio: 1; background: var(--ink); }
.study-next-lab-illustration i:first-child { transform: translate(35%, -35%); border-radius: 50%; background: var(--rust); }
.study-next-lab-illustration i:last-child { clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #325f90; }
.study-next-complete { grid-template-columns: minmax(0, 1fr); }
.study-next-complete > p { margin: 0; }

@media (min-width: 661px) {
  [data-study-next-step="compare"] .study-next-works {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-study-next-step="compare"] .study-next-image {
    --study-compare-height: clamp(220px, 32vw, 320px);
    min-height: var(--study-compare-height);
  }
  [data-study-next-step="compare"] .study-next-image img { max-height: var(--study-compare-height); }
  [data-study-next-step="compare"] .study-next-actions { grid-column: 2; }
}

@media (max-width: 660px) {
  .study-next-entry, .study-next-activity { grid-template-columns: minmax(0, 1fr); }
  .study-next-preview { order: -1; height: clamp(6.5rem, 25vw, 11rem); min-height: 0; overflow: hidden; }
  .study-next-progress :is(a, li > div) { padding-inline: .4rem; column-gap: .3rem; }
  .study-next-works, .study-next-lab-illustration { grid-row: auto; }
  .study-next-image img { max-height: 310px; }
}