.carousel-container {
      margin: 0;
      display: grid;
      place-items: center;
      height: fit-content;
      max-width: 1000px;
    }

    .carousel {
      overflow: hidden;
      position: relative;
    }

    /* Hide radio buttons */
    .carousel input {
      display: none;
    }

    .slides {
      display: flex;
      width: 500%;
      transition: transform 0.5s ease;
    }

    .slide {
      width: 20%;
      flex-shrink: 0;
    }

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

    /* Move between images */
    #slide1:checked ~ .slides {
      transform: translateX(0);
    }

    #slide2:checked ~ .slides {
      transform: translateX(-20%);
    }

    #slide3:checked ~ .slides {
      transform: translateX(-40%);
    }
     #slide4:checked ~ .slides {
      transform: translateX(-60%);
    }
     #slide5:checked ~ .slides {
      transform: translateX(-80%);
    }

    /* Navigation dots */
    .navigation {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 15px;
      display: flex;
      justify-content: center;
      gap: 10px;
    }

    .navigation label {
      width: 14px;
      height: 14px;
      border: 2px solid #000;
      border-radius: 50%;
      cursor: pointer;
    }

    #slide1:checked ~ .navigation label[for="slide1"],
    #slide2:checked ~ .navigation label[for="slide2"],
    #slide3:checked ~ .navigation label[for="slide3"],
    #slide4:checked ~ .navigation label[for="slide4"],
    #slide5:checked ~ .navigation label[for="slide5"] {
      background: #000;
    }