/* hps/steps */
.steps-sec { background: var(--night); color: #fff; padding-block: var(--sec); }
.steps-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.steps-grid > img { width: 100%; aspect-ratio: 4 / 5; max-height: 640px; object-fit: cover; border-radius: var(--r-panel); }
/* A lantern string: numbered beads on one thread, the last bead lit because it is the shoot itself */
.steps { --bead: 46px; --bead-gap: 22px; counter-reset: s; margin-top: clamp(26px, 3vw, 36px); }
.steps li { counter-increment: s; position: relative; min-height: var(--bead); padding: 7px 0 clamp(24px, 2.6vw, 34px) calc(var(--bead) + var(--bead-gap)); }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; box-sizing: border-box; width: var(--bead); height: var(--bead); border: 1px solid rgb(230 169 47 / .6); border-radius: 50%; background: var(--night); font-family: var(--serif); font-size: 1.4rem; font-weight: 500; line-height: 1; color: var(--turmeric); }
.steps li:last-child::before { background: var(--turmeric); border-color: var(--turmeric); color: var(--night); }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--bead) / 2 - .5px); top: 0; bottom: 0; width: 1px; background: rgb(230 169 47 / .45); }
.steps h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 500; line-height: 1.2; }
.steps p { margin-top: 5px; max-width: 56ch; line-height: 1.4; color: rgb(255 255 255 / .8); }
.steps-help { width: fit-content; max-width: 100%; margin-top: clamp(28px, 3vw, 38px); padding: 13px 20px; border-radius: var(--r-control); background: rgb(255 255 255 / .07); line-height: 1.4; }
/* On tablets the copy outgrows a 4:5 photo, so the photo takes the height of the copy */
@media (min-width: 761px) and (max-width: 1180px) {
  .steps-grid { align-items: stretch; }
  .steps-grid > img { height: 0; min-height: 100%; aspect-ratio: auto; max-height: none; }
}
@media (max-width: 760px) {
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid > img { aspect-ratio: 4 / 3; }
  .steps { --bead: 40px; --bead-gap: 16px; }
  .steps li { padding-top: 5px; }
  .steps li::before { font-size: 1.25rem; }
  .steps h3 { font-size: 1.3rem; }
}