/*---- NUMBER OF SLIDE CONFIGURATION ----*/
/* variables */
#slider {
  max-width: 1120px;
  margin: 1em auto;
  position: relative;
  user-select: none;
}

#slider input {
  display: none;
}

#slider .inner {
  width: 500%;
  line-height: 0;
}

#slider article {
  width: 20%;
  float: left;
  position: relative;
}
#slider article img {
  width: 100%;
}

/*---- SET UP CONTROL ----*/
.slider-prev-next-control {
  height: 50px;
  position: absolute;
  top: calc((100% + 82px) / 2);
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}
.slider-prev-next-control label {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  opacity: 0.7;
  pointer-events: auto;
  position: relative;
}
.slider-prev-next-control label:hover {
  opacity: 1;
}

.slider-dot-control {
  position: absolute;
  width: 100%;
  bottom: 5px;
  text-align: center;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
.slider-dot-control label {
  cursor: pointer;
  border-radius: 5px;
  display: block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  background: #bbb;
  transition: all 0.3s;
}
.slider-dot-control label:hover {
  background: #ccc;
  border-color: #777;
}

/* Slider Styling */
.slider-wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: 5px;
  background: #fff;
  transform: translateZ(0);
  transition: all 500ms ease-out;
}
.slider-wrapper .inner {
  transform: translateZ(0);
  transition: all 500ms ease-out;
}

/*---- SET POSITION FOR SLIDE ----*/
#slide1:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after {
  margin: 0;
  line-height: 38px;
  font-size: 3em;
  display: block;
  color: #777;
}

#slide5:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 22px solid #3b3b3b;
}

#slide5:checked ~ .slider-prev-next-control label:nth-child(1), #slide4:checked ~ .slider-prev-next-control label:nth-child(5), #slide3:checked ~ .slider-prev-next-control label:nth-child(4), #slide2:checked ~ .slider-prev-next-control label:nth-child(3), #slide1:checked ~ .slider-prev-next-control label:nth-child(2) {
  display: block;
  float: right;
  margin-right: 5px;
}

#slide1:checked ~ .slider-prev-next-control label:nth-child(5), #slide5:checked ~ .slider-prev-next-control label:nth-child(4), #slide4:checked ~ .slider-prev-next-control label:nth-child(3), #slide3:checked ~ .slider-prev-next-control label:nth-child(2), #slide2:checked ~ .slider-prev-next-control label:nth-child(1) {
  display: block;
  float: left;
  margin-left: 5px;
}

#slide1:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-right: 22px solid #3b3b3b;
}

#slide5:checked ~ .slider-dot-control label:nth-child(5), #slide4:checked ~ .slider-dot-control label:nth-child(4), #slide3:checked ~ .slider-dot-control label:nth-child(3), #slide2:checked ~ .slider-dot-control label:nth-child(2), #slide1:checked ~ .slider-dot-control label:nth-child(1) {
  background: #333;
}

#slide1:checked ~ .slider-wrapper .inner {
  margin-left: 0%;
}
#slide2:checked ~ .slider-wrapper .inner {
  margin-left: -100%;
}
#slide3:checked ~ .slider-wrapper .inner {
  margin-left: -200%;
}
#slide4:checked ~ .slider-wrapper .inner {
  margin-left: -300%;
}
#slide5:checked ~ .slider-wrapper .inner {
  margin-left: -400%;
}