/* ICS steps cards (Hỗ trợ / Support): spacing tokens for the exercise cards and the opened panel.
   Tokens: --sp-l (24px below 1200px), --sp-xl (32px at >=1200px, 4-column grid). One inset on all four sides; one gap between blocks; one gap between cards.
   Scope: #sup-cards > .ics-step-card (closed) and #steps-panel (opened). Global card CSS is not touched here. */
html body {
  --steps-pad: var(--sp-l);
  --steps-gap: var(--sp-l);
  --steps-card-gap: var(--sp-xl);
}
@media (min-width: 1200px) {
  html body { --steps-pad: var(--sp-xl); }
}
html body #sup-cards {
  gap: var(--steps-card-gap);
}
html body #sup-cards > .ics-step-card {
  box-sizing: border-box;
  padding: var(--steps-pad);
  gap: 0;
}
html body #sup-cards > .ics-step-card > .ics-art {
  box-sizing: border-box;
  height: auto;
  aspect-ratio: auto;
  padding: 0;
  margin: 0 auto var(--steps-gap);
  width: min(100%, 240px);
}
html body #sup-cards > .ics-step-card > .ics-art img {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  inset: auto;
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
}
html body #sup-cards > .ics-step-card > .ics-step-body {
  box-sizing: border-box;
  flex: 1 1 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--steps-gap);
  text-align: center;
}
html body #sup-cards > .ics-step-card > .ics-step-body > h3,
html body #sup-cards > .ics-step-card > .ics-step-body > p {
  margin: 0;
  max-width: 100%;
}
html body #sup-cards > .ics-step-card > .ics-step-body::after {
  margin-top: auto;
}
html body #steps-panel.ics-steps-wrap .ics-sp {
  padding: var(--steps-pad);
}
/* EN opened panel: ics-en-p6b.css forces padding-left:24px !important on .ics-sp.ics-torn-card; match it to the same token. */
html[lang] body #steps-panel.ics-steps-wrap .ics-sp.ics-torn-card {
  padding: var(--steps-pad) !important;
}