/* Section 3 becomes a swipeable carousel on small screens. */
#headings .sample-slider-controls{display:none}

@media screen and (max-width:760px){
  #headings .sample-scene-pin{overflow:visible}
  #headings .sample-grid{
    display:flex;
    align-items:stretch;
    gap:16px;
    width:calc(100% + 36px);
    margin:0 -18px;
    padding:12px 18px 30px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:18px;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #headings .sample-grid::-webkit-scrollbar{display:none}
  #headings .sample-card{
    flex:0 0 min(82vw,420px);
    width:min(82vw,420px);
    min-height:0;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    transform:none;
  }
  #headings .sample-slider-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:0 0 28px;
  }
  #headings .sample-slider-position{
    color:#17685f;
    font:600 13px/1.4 "Instrument Sans",sans-serif;
    letter-spacing:.08em;
    font-variant-numeric:tabular-nums;
  }
  #headings .sample-slider-buttons{display:flex;gap:10px}
  #headings .sample-slider-buttons button{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid #8ebeb5;
    border-radius:50%;
    background:#ffffffb8;
    color:#17685f;
    font-size:23px;
    line-height:1;
  }
  #headings .sample-slider-buttons button:disabled{opacity:.35;cursor:default}
  #headings .sample-slider-buttons button:not(:disabled):hover{background:#dcefea}
}

@media screen and (max-width:520px){
  #headings .sample-card{padding:24px}
}