Vertical Slider with Navigation Buttons

HTML

<div class="container">
	<input type="radio" name="carousel-control" id="button1" hidden checked>
	<input type="radio" name="carousel-control" id="button2" hidden>
    <input type="radio" name="carousel-control" id="button3" hidden>

    <div class="carousel">
        <div class="wrapper">
            <div class="page">
                <h2>Page 1</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laboriosam dolorum illo soluta dolore earum quos, reprehenderit quo nobis explicabo dolores, nesciunt impedit officia ipsam distinctio totam voluptate et expedita?</p>
            </div>
            <div class="page">
                <h2>Page 2</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit odit, hic, ea similique maxime nisi minus enim harum dolore error, necessitatibus inventore mollitia dolores minima reprehenderit sequi nemo quas quae.</p>
            </div>
            <div class="page">
                <h2>Page 3</h2>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure, voluptates, pariatur adipisci vero minus dolorem, blanditiis similique rem velit quae ullam ab soluta laborum eligendi corporis ipsam temporibus asperiores ratione.</p>
            </div>
        </div>
    </div>

    <div id="navigation">
        <label for="button1" class="label1">1</label>
        <label for="button2" class="label2">2</label>
        <label for="button3" class="label3">3</label>
    </div>
</div>

CSS

body {
  background-color: #2E3537;
  margin: 50px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: sans-serif;
}

.carousel {
  overflow: hidden;
  width: 600px;
  height: 400px;
  border-radius: 5px;
  background-color: white;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.page {
  box-sizing: border-box;
  overflow: auto;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 50px;
}

#navigation {
  margin-left: 25px;
}

#navigation label {
  background-color: white;
  display: block;
  cursor: pointer;
  margin: 10px 0;
  width: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 5px;
  transition: all 0.4s ease;
}

#navigation label:hover,
#button1:checked ~ #navigation .label1,
#button2:checked ~ #navigation .label2,
#button3:checked ~ #navigation .label3 {
  background-color: #3081A7;
  color: white;
}

#button1:checked ~ .carousel .wrapper {
  transform: translateY(0);
}

#button2:checked ~ .carousel .wrapper {
  transform: translateY(-100%);
}

#button3:checked ~ .carousel .wrapper {
  transform: translateY(-200%);
}