.horizontal-scrollable-list {position: relative;box-sizing: border-box;width: 100%;padding: 0;}.horizontal-scrollable-list::before,.horizontal-scrollable-list::after {opacity: 0;content: "";position: absolute;top: 0;bottom: 0;width: 1rem;pointer-events: none;background: linear-gradient(to right,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 80%);z-index: 1;transition: opacity 0.18s ease-in-out;}.horizontal-scrollable-list::before {left: 0;background: linear-gradient(to left,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 80%);}.horizontal-scrollable-list::after {right: 0;}.horizontal-scrollable-list ul {margin: 0;padding: 0 0 0.25rem 0;display: flex;flex-direction: row;flex-wrap: nowrap;list-style: none;gap: 0.5rem;max-width: 100%;overflow-x: auto;overflow-y: hidden;scroll-behavior: smooth;scroll-snap-type: x mandatory;-ms-overflow-style: none;scrollbar-width: none;scroll-padding-left: 0.625rem;}.horizontal-scrollable-list ul::-webkit-scrollbar {display: none;}.horizontal-scrollable-list ul li {position: relative;box-sizing: border-box;display: flex;scroll-snap-align: start;user-select: none;}.horizontal-scrollable-list ul li:first-child {padding-left: 0.625rem;}.horizontal-scrollable-list ul li:last-child {padding-right: 0.625rem;scroll-snap-align: end;}.horizontal-scrollable-list button.previous,.horizontal-scrollable-list button.next {opacity: 0;position: absolute;box-sizing: border-box;background: rgba(0, 0, 0, 0.3);box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.6);border-radius: 50vh;left: 0;top: 50%;transform: translateY(-50%);text-align: center;border: 0;font-size: 12px;font-weight: 700;color: #fff;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);height: 2rem;line-height: 2rem;width: 2rem;text-align: center;cursor: pointer;padding: 0;z-index: 2;transition: opacity 0.18s ease-in-out;}.horizontal-scrollable-list button.next {right: 0;left: auto;}.horizontal-scrollable-list button .icon {transition: margin-left 0.18s ease-in-out;filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));}.horizontal-scrollable-list.scrollable:hover::before,.horizontal-scrollable-list.scrollable:hover::after {opacity: 0.8;}.horizontal-scrollable-list.scrollable:hover button.previous,.horizontal-scrollable-list.scrollable:hover button.next {opacity: 0.9;}.horizontal-scrollable-list.scrollable:hover button:hover {opacity: 1;}.horizontal-scrollable-list.scrollable:hover button.next:hover .icon {margin-left: 0.125rem;}.horizontal-scrollable-list.scrollable:hover button.previous:hover .icon {margin-left: -0.125rem;}.horizontal-scrollable-list.scrollable button:disabled {opacity: 0;}@media only screen and (max-width: 640px) {.horizontal-scrollable-list::before,.horizontal-scrollable-list::after {display: none;}.horizontal-scrollable-list > button.previous,.horizontal-scrollable-list > button.next {display: none;}}