/* FuelDosth phone frame: pure CSS, wraps any screenshot. Drop into your repo. */
:root{--fd-red:#c95353;--fd-navy:#2e4157;--phone-w:260px}

.phone{
  width:var(--phone-w);
  aspect-ratio:1080/2400;           /* matches your screenshots, no layout shift */
  flex:0 0 auto;
  position:relative;
  background:#111;
  border-radius:12% / 5.4%;
  padding:2.2%;
  box-shadow:0 0 0 2px #2b2b2b, 0 18px 40px rgba(46,65,87,.28);
}
.phone::before{                      /* side button */
  content:"";position:absolute;right:-3px;top:22%;width:3px;height:9%;
  background:#2b2b2b;border-radius:0 2px 2px 0;
}
.phone img{
  display:block;width:100%;height:100%;
  object-fit:cover;
  border-radius:10% / 4.4%;
  background:#f4f4f4;
}

/* Gallery: swipeable row on phones, centered wrap on larger screens */
.phone-gallery{
  display:flex;gap:28px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px 20px 28px;
  -webkit-overflow-scrolling:touch;
}
.phone-gallery figure{margin:0;scroll-snap-align:center;text-align:center;flex:0 0 auto}
.phone-gallery figcaption{margin-top:14px;font-weight:600;color:var(--fd-navy)}
.phone-gallery figcaption span{display:block;font-weight:400;font-size:.9rem;opacity:.75;margin-top:2px}

@media (max-width:600px){ :root{--phone-w:min(68vw,260px)} }
@media (min-width:1100px){
  .phone-gallery{flex-wrap:wrap;justify-content:center;overflow:visible;max-width:1200px;margin:0 auto}
}