.tu-artwork {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #fbf9f2;
}

.tutorial-page .tu-hero { align-items: start; }
.tutorial-page .tu-hero > div:first-child { padding-top: 8px; }

.tu-artwork > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

.tu-artwork > figcaption {
  display: block;
  margin: 0;
  padding: 11px 15px;
  border-top: 1px solid #e7dece;
  color: #52636a;
  background: #fffdf8;
  font-size: 12px;
  font-weight: 450;
  line-height: 1.6;
  letter-spacing: 0;
}

.tu-scenario {
  --artwork-inset-x: 30px;
  --artwork-inset-y: 29px;
}

.tu-scenario > .tu-artwork--scenario {
  width: calc(100% + var(--artwork-inset-x) + var(--artwork-inset-x));
  margin: calc(-1 * var(--artwork-inset-y)) calc(-1 * var(--artwork-inset-x)) 25px;
}

.tu-artwork--scenario > figcaption {
  padding: 11px var(--artwork-inset-x);
  border-bottom: 1px solid #e7dece;
}

.ex-card-body > .tu-artwork--hub {
  margin: 0 0 28px;
  border: 1px solid #ded4c3;
  border-radius: 15px;
}

@media (min-width: 761px) and (max-width: 1180px) {
  .ex-card-body > .tu-artwork--hub {
    grid-column: 1 / -1;
    grid-row: 1;
    width: min(100%, 660px);
    margin: 0 auto 30px;
  }

  .ex-card-body > .ex-card-kicker { grid-row: 2; }
  .ex-card-body > h3 { grid-row: 3 / 5; }
  .ex-card-body > .ex-card-meta { grid-row: 5; }
  .ex-card-body > .ex-question { grid-row: 2 / 4; }
  .ex-card-body > p:not(.ex-question) { grid-row: 4 / 6; }
}

@media (max-width: 1180px) {
  .tu-scenario {
    --artwork-inset-x: 25px;
    --artwork-inset-y: 25px;
  }
}

@media (max-width: 920px) {
  .tu-scenario {
    --artwork-inset-x: 24px;
    --artwork-inset-y: 24px;
  }
}

@media (max-width: 760px) {
  .tutorial-page .tu-hero > div:first-child { padding-top: 0; }
  .tu-scenario {
    --artwork-inset-x: 25px;
    --artwork-inset-y: 25px;
  }

  .tu-scenario > .tu-artwork--scenario { margin-bottom: 22px; }
  .ex-card-body > .tu-artwork--hub { margin-bottom: 25px; border-radius: 12px; }
  .tu-artwork > figcaption { font-size: 12px; line-height: 1.6; }
}

@media (max-width: 370px) {
  .tu-scenario {
    --artwork-inset-x: 22px;
    --artwork-inset-y: 22px;
  }
}