.vb-scroll-list{--vb-scroll-list-gap:16px;--vb-scroll-list-columns:6;--vb-scroll-list-aspect:21/1;--vb-scroll-list-padding:calc(var(--vb-scroll-list-gap)*2);display:block;margin-bottom:calc(var(--vb-scroll-list-padding)*-1);margin-top:calc(var(--vb-scroll-list-padding)*-1);position:relative}.vb-scroll-list>.viewport{overflow-x:scroll;overflow-y:hidden;scrollbar-width:none}.vb-scroll-list>.viewport>ul{display:flex;gap:var(--vb-scroll-list-gap);margin:0;padding:0}.vb-scroll-list>.viewport>ul>li{box-sizing:content-box;flex-shrink:0;list-style-type:none;padding:var(--vb-scroll-list-padding) 0;width:calc((100% - var(--vb-scroll-list-gap)*2)/var(--vb-scroll-list-columns) - var(--vb-scroll-list-gap) + var(--vb-scroll-list-gap)/var(--vb-scroll-list-columns))}.vb-scroll-list>.viewport>ul>li:first-of-type{padding-left:var(--vb-scroll-list-gap)}.vb-scroll-list>.viewport>ul>li:last-of-type{padding-right:var(--vb-scroll-list-gap)}.vb-scroll-list>button{aspect-ratio:1/1;background-color:var(--color-pink);border:1px solid var(--color-pink);border-radius:50%;margin-top:50%;margin-top:calc(((100% - var(--vb-scroll-list-gap)*2)/var(--vb-scroll-list-columns) - var(--vb-scroll-list-gap) + var(--vb-scroll-list-gap)/var(--vb-scroll-list-columns))*1/(var(--vb-scroll-list-aspect))/2 + var(--vb-scroll-list-padding));position:absolute;top:0;transform:translateY(-50%);width:50px;z-index:10}.vb-scroll-list>.prev{left:-8px}.vb-scroll-list>.next{right:-8px}.vb-scroll-list .hidden{opacity:0}@media(hover:none){.vb-scroll-list .viewport>ul>li{width:calc((100% - var(--vb-scroll-list-gap)*2)/(var(--vb-scroll-list-columns) - 1) - var(--vb-scroll-list-gap) + var(--vb-scroll-list-gap)/(var(--vb-scroll-list-columns) - 1) - (var(--vb-scroll-list-gap)*2)/var(--vb-scroll-list-columns))}.vb-scroll-list>button{display:none}.vb-scroll-list>.viewport{overflow-x:scroll}}