/* Carousel (https://code.usecue.com/carousel/), bullets and arrows are added by /js/carousel.js */
.carousel { position: relative; width: 100%; }
.carousel .sr-only { display: none; }
.carousel ul { overflow: auto; display: flex; flex-wrap: nowrap; scroll-snap-type: x mandatory; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; margin: 0; padding: 0; cursor: grab; user-select: none; aspect-ratio: 3 / 2; }
.carousel ul.grabbing { cursor: grabbing; scroll-behavior: auto; }
.carousel ul::-webkit-scrollbar { display: none; }
.carousel ul li { position: relative; flex: 0 0 100%; height: 100%; margin: 0; padding: 0; list-style: none; scroll-snap-align: start; }
.carousel ul li > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carousel ol { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 0; padding: 0; }
.carousel ol li { list-style: none; margin: 0; padding: 0; }
.carousel ol li a { display: block; box-sizing: border-box; width: 12px; height: 12px; border: 2px solid var(--primary-color); border-radius: 100%; background: transparent; transition: background .2s; }
.carousel ol li.selected a { background: var(--primary-color); }
.carousel .prev, .carousel .next { position: absolute; top: 0; bottom: calc(12px + 1.25rem); left: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: 3.5rem; height: auto; padding: 0 0 .25rem; font-size: 3.5rem; line-height: 1; color: white; text-shadow: 0 0 .5rem rgba(0,0,0,.4); font-family: sans-serif; cursor: pointer; user-select: none; background: none; border: 0; }
.carousel .next { left: auto; right: 0; }