.carousel {position: relative; margin-bottom: 6rem;}
.carousel ul {overflow: auto; display: flex; gap: 1rem; flex-wrap: nowrap; scroll-snap-type: x mandatory; scroll-snap-points-y: repeat(100%); scroll-behavior: smooth; -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: calc(50% - 0.5rem); list-style: none; background: url() center center / cover no-repeat; scroll-snap-align: start;}
.carousel ul li > img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.carousel ol {position: absolute; bottom: 15px; display: flex; justify-content: center; left: 50%; transform: translateX(-50%); 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: 50px; 
    color: transparent; 
    position: absolute; 
    left: 0; 
    padding: 1rem; 
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 9; 
    line-height: 0; 
    margin-left: -3.5rem; 
    user-select: none;
    background: url(/img/arrowrightbold.svg) center center / 1.35rem auto no-repeat;
    transform: rotate(180deg);
    margin-top: -1rem;
}
.carousel .next {left: auto; right: 0; margin-left: 0; margin-right: -3.5rem; transform: rotate(0deg)}
@media (max-width: 1000px) {
    .carousel .prev, .carousel .next {
        top: 0;
        right: 0;
        margin-right: 0;
        margin-left: auto;
        left: auto;
        padding: 1rem 0.15rem; 
        margin-top: -2.5rem;
    }
    .carousel .prev {margin-right: 2.5rem;}
}
@media (max-width: 500px) {
    .carousel .prev, .carousel .next {position: relative; margin-top: 1rem; display: inline-block!important;}
    .carousel .prev {margin-right: 0.75rem;}
    .carousel ul li {min-width: 100%;}
}