/* CAROUSEL CSS */
.carousel {position: relative;}
.carousel::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.carousel ul {
  overflow: auto; 
  display: flex; 
  height: 45vw;
  max-height: 500px;
  scroll-snap-type: x mandatory;
  scroll-snap-points-y: repeat(100%);
  scroll-behavior: smooth;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  width: 100%;
  cursor: grab; user-select: none;}
.carousel ul.grabbing {cursor: grabbing; scroll-behavior: auto;}

.carousel ul::-webkit-scrollbar {display: none; /* Hide scrollbar for Chrome, Safari and Opera */} 
.carousel ul li {
  width: 100%;
  min-width: 100%; 
  list-style: none; 
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-primary);
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  text-shadow: 0px 0px 10px rgba(0,0,0,0.75);
}
.carousel ul li div {z-index: 9;}
.carousel ul li div a {color: white; display: inline-block; background: white; text-shadow: none; color: black; padding: 5px 15px; font-size: 18px; text-decoration: none; border-radius: 4px; margin-top: 10px;}
.carousel ol {position: absolute; bottom: 15px; display: flex; justify-content: center; left: 50%; transform: translateX(-50%); z-index: 9;}
.carousel ol li {list-style: none; padding: 0 5px; overflow: hidden;}
.carousel ol li a {display: block; height: 10px; width: 10px; border: 2px solid var(--text-primary); background: transparent; border-radius: 100%; color: transparent;}
.carousel ol li.selected a {background: var(--text-primary);}
.carousel .prev, .carousel .next {user-select:none; cursor: pointer; font-size: 50px; color: var(--text-primary); position: absolute; left: 0; padding: 15px; top: 50%; transform: translateY(-50%); z-index: 9; background: none; border: 0;}
.carousel .next {left: auto; right: 0;}

/* RESPONSIVE CSS */
@media only screen and (max-width: 600px) {
  .carousel ul li div {display: none;}
}