.sampler{padding:32px 0 72px;max-width:820px;margin:0 auto}
.sampler h1{font-size:clamp(24px,3.2vw,34px);margin:8px 0 10px;color:var(--teal)}
.lead{color:var(--muted);margin-bottom:24px}
.cloth{scroll-margin-top:72px;display:grid;grid-template-columns:14px 1fr;gap:0;margin-bottom:16px;background:var(--tile);border:3px dotted var(--coral)}
.cloth .piping{background:var(--teal)}
.cloth:nth-child(odd) .piping{background:var(--mustard)}
.cloth:nth-child(3n) .piping{background:var(--coral)}
.cloth .pad{padding:16px 18px;position:relative}
.cloth .pad::before,.cloth .pad::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--mustard)}
.cloth .pad::before{top:8px;left:8px}
.cloth .pad::after{bottom:8px;right:8px}
.cloth h2{font-size:18px;color:var(--teal);margin-bottom:8px}
.cloth p{font-size:15px;color:#4a3a32}
.cloth .kpi{display:block;margin-top:8px;font-weight:800;font-size:13px;color:var(--coral)}
.cloth img{width:min(100%,280px);height:140px;object-fit:cover;margin-top:12px;border:3px solid var(--teal)}
@media(max-width:720px){.cloth{grid-template-columns:8px 1fr}}