medium carousel article

slider.css

.slider .slide-item {
  cursor: grabbing;
  scroll-snap-align: start;
  flex-shrink: 0; /* We don't want to fit divs to parent element. So we'll use flex-shrink: 0 */
  background-color: red;
  width: 100%;
  display: grid;
  place-items: center;
  font-size: 5rem;
}

.slide-item:nth-of-type(1) {
  background: linear-gradient(
    to right,
    #000000,
    #e74c3c
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.slide-item:nth-of-type(2) {
  background: linear-gradient(
    to right,
    #485563,
    #29323c
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.slide-item:nth-of-type(3) {
  background: linear-gradient(
    to right,
    #556270,
    #ff6b6b
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}