.slider {
  overflow: hidden;
}
.slider__cnt {
  display: flex;
  left: -100%;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  transform: translateX(100%);
}
@media screen and (min-width: 30em) {
  .slider__cnt {
    left: -50%;
    transform: translateX(50%);
  }
}
@media screen and (min-width: 40em) {
  .slider__cnt {
    left: -33.3333333333%;
    transform: translateX(33.3333333333%);
  }
}
@media screen and (min-width: 50em) {
  .slider__cnt {
    left: -25%;
    transform: translateX(25%);
  }
}
.slider__cnt[data-is-reversing="1"] {
  transform: translateX(-100%);
}
@media screen and (min-width: 30em) {
  .slider__cnt[data-is-reversing="1"] {
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 40em) {
  .slider__cnt[data-is-reversing="1"] {
    transform: translateX(-33.3333333333%);
  }
}
@media screen and (min-width: 50em) {
  .slider__cnt[data-is-reversing="1"] {
    transform: translateX(-25%);
  }
}
.slider__cnt[data-is-set="1"] {
  transform: none;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.slider__el {
  text-align: center;
  background: #ddd;
  flex: 1 0 100%;
  order: 2;
}
.slider__el:nth-child(even) {
  background: #d5d5d5;
}
@media screen and (min-width: 30em) {
  .slider__el {
    flex-basis: 50%;
  }
}
@media screen and (min-width: 40em) {
  .slider__el {
    flex-basis: 33.3333333333%;
  }
}
@media screen and (min-width: 50em) {
  .slider__el {
    flex-basis: 25%;
  }
}
.slider__el[data-is-ref="1"] {
  order: 1;
}

.img__cnt {
  padding: 5px;
}
.img__cnt > img {
  width: 100%;
  height: auto;
}

.controls {
  padding: 2em;
  text-align: center;
}
.controls button {
  background: #aaa;
  border: 0;
  border-radius: 0.25em;
  color: #eee;
  padding: 0.5em 1em;
}
.controls button:hover, .controls button:focus {
  background: magenta;
}