.slider {display:flex; max-width:100vw; height:25rem; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;}
.slider__slide {display:flex; min-width: 100vw; width:100%; height:100%; justify-content:space-between; align-items:center; background-color:white; color:black; scroll-snap-align:start;}
 
  
  /* Arrows */
  .right-arrow, .left-arrow {position:absolute; top:50%; width:32px; height:39px; color:black; transform:translateY(-50%); z-index:1000; cursor:pointer;}
  .right-arrow {right:5rem;}
  .left-arrow {left:5rem;}
  
  .right-arrow::before,
  .right-arrow::after,
  .left-arrow::before,
  .left-arrow::after {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
      rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
      rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
    content: "";
    position: absolute;
    width: 32px;
    height: 8px;
    background-color:#0c0c55;
  }
  
  .right-arrow::before {
    transform: rotate(45deg);
  }
  
  .right-arrow::after {
    transform: rotate(-45deg);
    bottom: 14px;
  }
  
  .left-arrow::before {
    transform: rotate(-45deg);
  }
  
  .left-arrow::after {
    transform: rotate(45deg);
    bottom: 14px;
  }
  
  /* Hide the scrollbar */
  .slider::-webkit-scrollbar {display: none; /* Safari, Google Chrome, Opera,  */}
  .slider {-ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */}
  
  /* Adaptive */
  @media screen and (max-width: 720px) {
    .right-arrow::before,
    .right-arrow::after,
    .left-arrow::before,
    .left-arrow::after {
      width: 32px;
      height: 12px;
    }
    .right-arrow::after,
    .left-arrow::after {
      bottom: 16px;
    }
    .right-arrow::before,
    .left-arrow::before {
      top: 20px;
    }
    .right-arrow::before,
    .right-arrow::after {
      right: 0;
    }
  }