/* v2_carousel: the nine feature tiles as a horizontal snap carousel at every width. Phones: one card (80%) with the next
   peeking. Desktop: three cards in view. Dots below, slow auto-drift until touched. */
.bento.carousel{display:flex;gap:12px;margin:36px -22px 0;padding:0 22px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.bento.carousel::-webkit-scrollbar{display:none}
.bento.carousel .bt{flex:0 0 80%;scroll-snap-align:center;min-height:0;aspect-ratio:3/4;transform:none;opacity:1;transition:none}
.bento.carousel .bt.img .ov{padding:90px 20px 20px}
.bento.carousel .bt.img h3{font-size:22px}
.bento.carousel .bt.img p{font-size:17px}
@media (min-width:900px){
  .bento.carousel{gap:18px;margin:48px 0 0;padding:0 max(40px,calc((100% - 1200px) / 2));scroll-padding:0 max(40px,calc((100% - 1200px) / 2))}
  .sec .wl:has(.bento.carousel){max-width:none;padding-left:0;padding-right:0}
  .bento.carousel .bt{flex:0 0 360px;scroll-snap-align:start;aspect-ratio:3/4;min-height:0}
  .bento.carousel .bt.img .ov{padding:120px 24px 24px}
  .bento.carousel .bt.img h3{font-size:24px}
}
.cardots{display:flex;justify-content:center;gap:4px;margin-top:14px}
.cardots i{width:6px;height:6px;border-radius:50%;background:#3a3a3f;border:8px solid transparent;background-clip:padding-box;box-sizing:content-box;cursor:pointer;transition:background-color .2s,transform .2s}
.cardots i.on{background-color:#fff;transform:scale(1.4)}