| | .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;
|
| | -ms-overflow-style: none;
|
| | }
|
| |
|
| |
|
| | .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);
|
| | } |