/* Solution 01 gallery: the screen and its explanation read as one piece.
   Card, blur and caption come from .mcard in case.css; the defaults there
   are these numbers, so only the phone sizes need saying. */
@media(max-width:700px){
  .case-dex .s1-media-grid .fig{
    --mcard-inset:10px;
    --mcard-cap-pad:12px 16px 20px;
  }
}

/* Do not stretch the short side column to the height of the main column.
   Supporting cards should follow each other with the normal gallery gap —
   space-between would spread two cards across the height of three. */
@media(min-width:900px){
  .case-dex .s1-media-main,
  .case-dex .s1-media-side{justify-content:flex-start}
}

/* Solution 02 uses the same card, one step tighter. */
.case-dex #s2 .step3{
  --mcard-blur-h:36px;
  --mcard-fade-h:42px;
  --mcard-cap-pad:12px 20px 22px;
  padding:0;gap:0;
}
.case-dex #s2 .step3-shot{
  aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-inner);line-height:0;
}
.case-dex #s2 .step3-shot img{
  width:100%;height:100%;aspect-ratio:auto;object-fit:contain;object-position:center;
  border-radius:var(--radius-inner);
}
.case-dex #s2 .step3-copy{display:flex;flex:1;flex-direction:column}
.case-dex #s2 .step3-copy .n{display:block;margin-bottom:10px}
.case-dex #s2 .step3-copy p{margin:0}

@media(max-width:700px){
  .case-dex #s2 .step3{
    --mcard-inset:10px;
    --mcard-cap-pad:12px 16px 20px;
  }
}