.root { @apply relative w-full h-full select-none; overflow: hidden; } .slider { @apply relative h-full transition-opacity duration-150; opacity: 0; } .slider.show { opacity: 1; } .thumb { @apply overflow-hidden inline-block cursor-pointer h-full; width: 125px; width: calc(100% / 3); } .thumb.selected { @apply bg-white; } .thumb img { height: 85% !important; } .album { width: 100%; height: 100%; @apply bg-violet-dark; box-sizing: content-box; overflow-y: hidden; overflow-x: auto; white-space: nowrap; height: 125px; scrollbar-width: none; } /* Hide scrollbar for Chrome, Safari and Opera */ .album::-webkit-scrollbar { display: none; } @screen md { .thumb:hover { transform: scale(1.02); } .album { height: 182px; } .thumb { width: 235px; } }