#loopbox{
  --step:var(--gold-txt-web);
  --divider:rgba(195,177,225,.16);
  --pbw:min(1128px, calc(100vw - 52px));
}
@media (max-width:400px){
  #loopbox{--pbw:min(1128px, calc(100vw - 36px))}
}


#loopbox .strip{
  position:absolute;inset:0;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr auto;
  padding:clamp(18px,calc(var(--pbw) * .03),44px)
          clamp(16px,calc(var(--pbw) * .026),36px)}

#loopbox .pic{
  margin:0;min-width:0;position:relative;
  display:flex;flex-direction:column;
  padding:0 clamp(8px,calc(var(--pbw) * .013),18px)}
#loopbox .pic img{flex:1 1 auto}

@supports (grid-template-rows: subgrid){
  #loopbox .pic{
    display:grid;grid-template-rows:subgrid;grid-row:span 2}
  #loopbox .pic img{flex:none}
}

#loopbox .pic + .pic::before{
  content:"";position:absolute;left:0;top:8%;bottom:8%;width:1px;
  background:var(--divider)}

#loopbox .pic img{
  width:100%;height:auto;min-height:0;object-fit:contain;
  display:block;margin:auto 0}

#loopbox .pic figcaption{align-self:start;padding-top:clamp(8px,calc(var(--pbw) * .014),18px)}

#loopbox .stepno{
  display:flex;align-items:center;gap:10px;
  font-size:clamp(.62rem,calc(var(--pbw) * .009),.74rem);
  font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--step)}
#loopbox .stepno .n{
  font-family:'Fraunces',serif;font-weight:500;letter-spacing:0;font-size:1.25em}
#loopbox .stepno::after{
  content:"";flex:1;height:1px;opacity:.7;
  background:linear-gradient(90deg,var(--gold-web),transparent)}

#loopbox .pic p{
  margin:clamp(6px,calc(var(--pbw) * .009),10px) 0 0;
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(.9rem,calc(var(--pbw) * .0155),1.28rem);
  line-height:1.28;letter-spacing:-.005em;color:var(--text)}

:where(html.anim) #loopbox .strip .pic.reveal{transform:translateY(10px)}
#loopbox .strip .pic.reveal.in{transform:none}


@media (max-width:760px){
  #loopbox{aspect-ratio:auto}
  #loopbox .strip{
    position:relative;grid-template-columns:1fr;grid-template-rows:none;
    gap:26px;padding:26px 22px 28px}
  #loopbox .pic{padding:0;grid-template-rows:auto auto;grid-row:auto}
  #loopbox .pic + .pic::before{
    left:6%;right:6%;top:-13px;bottom:auto;width:auto;height:1px}
  #loopbox .pic img{aspect-ratio:3/2;max-height:calc(var(--pbw) * .46)}
  #loopbox .pic p{font-size:1.12rem}
  #loopbox .stepno{font-size:.68rem}
}


@media (prefers-color-scheme: light){
  :where(html:not([data-scheme])) #loopbox{
    --step:var(--gold-text);
    --divider:rgba(94,75,139,.14)}
}
  :where(html[data-scheme="light"]) #loopbox{
    --step:var(--gold-text);
    --divider:rgba(94,75,139,.14)}