/* mobile-first · breakpoints up: 768 · 881 · 1025 · 1201 · 1367 · 2400 */
.fbdd{
  --line:rgba(11,21,51,.12);
  --h:150px;          /* image height */
  --gap:10px;
  --sp1:44s;          /* top row speed — bigger is slower */
  --sp2:52s;          /* bottom row speed */
  background:transparent; max-width:100%; overflow-x:clip;
}
.fbdd *{box-sizing:border-box;min-width:0;}
.fbdd-sec{padding:clamp(24px,4vw,48px) 0;background:transparent;overflow:hidden;}

.fbdd-marquee{position:relative;overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.fbdd-marquee+.fbdd-marquee{margin-top:8px;}
.fbdd-track{display:flex;width:max-content;will-change:transform;}
/* fixed 4:5 frames: every photo is the same width before and after it loads, so the loop never jumps */
.fbdd-track img{display:block;flex:none;height:var(--h);width:auto;aspect-ratio:4/5;object-fit:cover;
  margin-right:var(--gap);            /* margin, not gap, so -50% lands exactly on the repeat */
  border:1px solid var(--line);background:rgba(11,21,51,.06);
  filter:saturate(.98);transition:filter .4s,transform .5s;}
.fbdd-track img:hover{filter:saturate(1.05);transform:translateY(-4px);}
.fbdd-left{animation:fbddLeft var(--sp1) linear infinite;}
.fbdd-right{animation:fbddRight var(--sp2) linear infinite;}
@keyframes fbddLeft{ from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);} }
@keyframes fbddRight{ from{transform:translate3d(-50%,0,0);} to{transform:translate3d(0,0,0);} }
.fbdd-marquee:hover .fbdd-track{animation-play-state:paused;}

@media (min-width:768px){ .fbdd{--h:170px;} }
@media (min-width:881px){ .fbdd{--h:clamp(160px,28vw,210px);--gap:14px;--sp1:52s;--sp2:62s;} }
@media (min-width:1025px){ .fbdd{--h:clamp(170px,24vw,240px);--sp1:64s;--sp2:78s;} }
@media (min-width:1201px){ .fbdd{--h:clamp(180px,22vw,280px);} }
@media (min-width:2400px){ .fbdd{--h:320px;} }
@media (prefers-reduced-motion:reduce){
  .fbdd-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:var(--gap);}
  .fbdd-track img:nth-child(n+9){display:none;}
  .fbdd-track img{transition:none;}
  .fbdd-marquee{-webkit-mask-image:none;mask-image:none;}
}