.carousel {position: relative;}
.carousel ul {overflow: auto; display: flex; flex-wrap: nowrap; scroll-snap-type: x mandatory; scroll-snap-points-y: repeat(100%); scroll-behavior: smooth; background: gray; -ms-overflow-style: none; scrollbar-width: none; margin: 0; padding: 0;}
.carousel ul::-webkit-scrollbar {display: none; /* Hide scrollbar for Chrome, Safari and Opera */} 
.carousel ul li {position: relative; min-width: 100%; list-style: none; background: url() center center / cover no-repeat; scroll-snap-align: start;}
.carousel ul li > * {position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.carousel ul li > img {object-fit: cover;}
.carousel ul li > a {display: flex; justify-content: center; align-items: flex-end; color: white; font-weight: bold; font-size: 20px; background: url(/img/play_large.png) center center / auto auto no-repeat; text-decoration: none;}
.carousel ul li > a > span {background: rgba(0,0,0,0.5); padding: 5px 20px 10px; text-align: center; width: 100%; font-size: 25px; line-height: 1.4;}
.carousel ol {position: absolute; top: 15px; display: flex; justify-content: center; left: 15px; z-index: 9; display: none;}
.carousel ol li {list-style: none; padding: 0 5px;}
.carousel ol li a {display: block; height: 10px; width: 10px; border: 2px solid white; background: transparent; border-radius: 100%;}
.carousel ol li.selected a {background: white;}
.carousel .prev, .carousel .next {display: none; user-select:none; cursor: pointer; font-size: 0; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 9; line-height: 0; height: 40px; width: 40px; border: 2px solid #f37e16;}
.carousel .next {left: auto; right: 0;}
.carousel .prev {background: #fff url('/img/left.png') center center no-repeat; margin-left: -23px;}
.carousel .next {background: #fff url('/img/right.png') center center no-repeat; margin-right: -23px;}