.u-rail-wrap{position:relative;width:100%}
.u-rail-track{list-style:none;margin:0;display:flex;gap:var(--sp-4);
   overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
   padding:0 var(--sp-6);

   -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--rail-fade,80px),
      #000 calc(100% - var(--rail-fade,80px)),transparent 100%);
   mask-image:linear-gradient(to right,transparent 0,#000 var(--rail-fade,80px),
      #000 calc(100% - var(--rail-fade,80px)),transparent 100%)}
.u-rail-track::-webkit-scrollbar{display:none}

.u-rail-wrap:has(.u-rail-track:focus-visible){border-radius:var(--r-card);box-shadow:var(--focus-ring)}
.u-rail-item{flex:none;width:var(--rail-w,220px)}

.u-rail-media{position:relative;width:100%;aspect-ratio:9/16;
   background:var(--dark);border-radius:var(--r-card);overflow:hidden}
.u-rail-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.u-rail-media:has(:focus-visible),
.u-rail-media:focus-within{outline:3px solid var(--blue);outline-offset:3px}
.u-rail-arrow{position:absolute;z-index:3;inset-block-start:50%;translate:0 -50%;
   width:48px;height:48px;border-radius:var(--r-pill);
   background:#fff;border:1px solid var(--panel);box-shadow:var(--sh-rest);
   display:flex;align-items:center;justify-content:center;cursor:pointer;
   color:var(--dark);transition:background .2s,color .2s,border-color .2s}
.u-rail-arrow svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.5;
   stroke-linecap:round;stroke-linejoin:round}
.u-rail-arrow:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.u-rail-arrow:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.u-rail-arrow[hidden]{display:none}
.u-rail-arrow--prev{inset-inline-start:var(--sp-2)}
.u-rail-arrow--next{inset-inline-end:var(--sp-2)}

@media(max-width:640px){
  .u-rail-track{--rail-fade:32px}

  .u-rail-arrow{width:44px;height:44px}
  .u-rail-arrow svg{width:20px;height:20px}
}