.sldr_track {
  --sldr-p: var(--n-2xl);
  --sldr-col-g: var(--n-2xl);
  --slide-w: 33.333%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  display: flex;
  gap: var(--sldr-col-g);
  padding-inline: var(--sldr-p);
  @media (width < 62em) {--slide-w: calc(50% - (var(--sldr-col-g) / 2));--sldr-p: 0;&:has(> *:nth-child(3)) ~ .nav-btn {display: flex!important}}
  @media (width < 40em) {--slide-w: 100%;--sldr-p: 0;&:has(> *:nth-child(1)) ~ .nav-btn {display: flex!important}}
  & > * {
    flex: 0 0 var(--slide-w);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    width: var(--slide-w)
  }
  &::-webkit-scrollbar {display: none}
  &:has(> *:nth-child(4)) ~ .nav-btn {display: flex!important}
}

/* navigation */
.prev-btn {rotate:90deg;left:clamp(var(--n-l),1.9vw,var(--n-2xl))}
.nxt-btn {rotate:-90deg;right:clamp(var(--n-l),1.9vw,var(--n-2xl))}
.nav-btn {
  --btn-bg: var(--ntl-100);
  --btn-gpm:0;
  --btn-br:var(--br-3xl);
  --nav-pos:30%;
  position:absolute;
  z-index: 1;
  top: var(--nav-pos);
  display: none!important;
  color: var(--txt);
  width: var(--n-4xl);
  aspect-ratio: 1;
  box-shadow: 0 0 0 var(--n-xs) var(--card-shd-clr);
  .r-ic,.l-ic{width: var(--n-l);background:var(--ntl-600)}
  
    @media (hover: hover) and (pointer: fine) {
      &:hover{
        --btn-bg: var(--prm-500);
        box-shadow:none;
        > *{background:var(--ntl-100)}}
    }
    
    &:focus-visible {
    scale: 1.1;
    --btn-fcs:var(--strk-h)
  }
}
.glry-nav{--nav-pos:45%}