.slider-wrapper { margin: 1rem; position: relative; overflow: hidden; } .slides-container { width: 100%; display: flex; list-style: none; margin: 0; padding: 0; overflow: scroll; scroll-behavior: smooth; } .slide { width: 100%; height: 100%; flex: 1 0 100%; margin: auto; } .slide > img { width: 100%; } .slides-container { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Internet Explorer 10+ */ } /* WebKit */ .slides-container::-webkit-scrollbar { width: 0; height: 0; } .slide-arrow { position: absolute; display: flex; top: 0; bottom: 0; margin: auto; height: 4rem; background-color: white; border: none; width: 2rem; font-size: 3rem; padding: 0; cursor: pointer; opacity: 0.5; transition: opacity 100ms; z-index: 999; } .slide-arrow:hover, .slide-arrow:focus { opacity: 1; } .slide-arrow-prev { left: 0; padding-left: 0.25rem; border-radius: 0 2rem 2rem 0; } .slide-arrow-next { right: 0; padding-left: 0.75rem; border-radius: 2rem 0 0 2rem; } .two-videos video { width: calc(50% - 1rem); } .two-videos img { width: calc(50% - 1rem); }