/* ---- horizontal scrollers: make the drag affordance obvious ---- */
.mkt-scroll-host{position:relative}
.mkt-scroll-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;border:none;
  background:rgba(255,255,255,.96);box-shadow:0 2px 10px rgba(0,0,0,.18);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:3;padding:0;
  opacity:1;transition:opacity .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.mkt-scroll-arrow[hidden]{display:none}
.mkt-scroll-arrow--prev{left:2px}
.mkt-scroll-arrow--next{right:2px}
.mkt-scroll-arrow img{width:17px;height:17px;display:block}
/* soft fade at whichever edge still has content behind it */
.mkt-scroll-host::after{
  content:'';position:absolute;top:0;bottom:0;right:0;width:44px;
  pointer-events:none;z-index:2;opacity:0;transition:opacity .2s ease;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9));
}
.mkt-scroll-host.can-next::after{opacity:1}
@media (max-width:640px){
  .mkt-scroll-arrow{width:32px;height:32px}
  .mkt-scroll-arrow--prev{left:2px}
  .mkt-scroll-arrow--next{right:2px}
}