.carousel {
  width: 100%;
  height: 400px;
  position: relative;
}

.slides {
  width: 100%;
  height: 100%;
  position: absolute;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  display: none;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.navigation {
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
}

.navigation label {
  width: 20px;
  height: 20px;
  background-color: #ccc;
  border-radius: 50%;
  margin: 10px;
  cursor: pointer;
}

#slide1:checked ~ .slides .slide:nth-child(1),
#slide2:checked ~ .slides .slide:nth-child(2),
#slide3:checked ~ .slides .slide:nth-child(3),
#slide4:checked ~ .slides .slide:nth-child(4),
#slide5:checked ~ .slides .slide:nth-child(5),
#slide6:checked ~ .slides .slide:nth-child(6),
#slide7:checked ~ .slides .slide:nth-child(7),
#slide8:checked ~ .slides .slide:nth-child(8),
#slide9:checked ~ .slides .slide:nth-child(9),
#slide10:checked ~ .slides .slide:nth-child(10),
#slide11:checked ~ .slides .slide:nth-child(11),
#slide12:checked ~ .slides .slide:nth-child(12),
#slide13:checked ~ .slides .slide:nth-child(13),
#slide14:checked ~ .slides .slide:nth-child(14),
#slide15:checked ~ .slides .slide:nth-child(15),
#slide16:checked ~ .slides .slide:nth-child(16),
#slide17:checked ~ .slides .slide:nth-child(17),
#slide18:checked ~ .slides .slide:nth-child(18),
#slide19:checked ~ .slides .slide:nth-child(19),
#slide20:checked ~ .slides .slide:nth-child(20)
 {
  display: block;
}