.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: #eee; -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; cursor: pointer;}
.carousel ul li > img {object-fit: cover;}
.carousel ul li > div {
    position: absolute;
    right: 0;
    bottom: 7%;
    width: 17.75%;
    height: 21%;
    padding: 1% 2%;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.carousel ul li > div h3 {color: #444;}
.carousel ul li > div p {margin-bottom: 3px;}
.carousel ol {display: none;}
.carousel .prev, .carousel .next {display: none; user-select:none; cursor: pointer; font-size: 50px; color: white; position: absolute; left: 0; padding: 15px 15px 30px; top: 50%; transform: translateY(-50%); z-index: 9; line-height: 0;}
.carousel .next {left: auto; right: 0;}