/* Two-panel step: the wording in one box, the screenshots in another.
   Used by every guide that puts pictures on its walkthrough steps. */

/* --- the pair sits side by side and matches height --- */
.step-text.has-shots{display:flex;gap:12px;align-items:flex-start}
.step.has-img{align-items:flex-start}

/* --- the wording box --- */
.step-body,
.step.has-img>.step-text{
  flex:1 1 380px;min-width:0;
  padding:13px 16px;
  background:rgba(255,255,255,.022);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
}

/* --- the picture box --- */
.step-shots,
.step.has-img>.step-img{
  flex:0 0 auto;margin:0;
  padding:10px;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
}
.step-shots{display:grid;grid-template-columns:minmax(0,330px);gap:8px;align-content:flex-start}
.step-shots.multi{grid-template-columns:repeat(2,minmax(0,330px))}
.step-shots img{
  width:100%;max-width:330px;height:auto;aspect-ratio:16/9;object-fit:contain;display:block;
  border-radius:8px;border:1px solid rgba(255,255,255,.14);background:#000;
  cursor:zoom-in;transition:border-color .15s;
}
.step-shots img:hover{border-color:rgba(255,255,255,.42)}

/* guides whose export puts one captioned picture on a step */
.step.has-img>.step-img{flex:0 0 350px;max-width:350px}
.step.has-img>.step-img img{margin:0;border-radius:8px}

/* --- narrow screens: the boxes stack, pictures stay two across --- */
@media(max-width:1250px){
  .step-text.has-shots{display:block}
  .step-shots{margin-top:10px}
  .step-shots,.step-shots.multi{justify-content:flex-start}
  .step.has-img>.step-img{flex:0 0 100%;max-width:100%;margin-top:10px}
}
@media(max-width:600px){
  .step-shots.multi{grid-template-columns:minmax(0,330px)}
  .step-shots img{max-width:none}
}