.photoset {
   position: relative;
}

.photoset .slide {
   display: none;
}

.photoset figure {
   position: relative;
   margin-top: 40px;
   max-width: 400px;
}

.photoset input#photo-01:checked~.slide[data-for="photo-01"],
.photoset input#photo-02:checked~.slide[data-for="photo-02"],
.photoset input#photo-03:checked~.slide[data-for="photo-03"],
.photoset input#photo-04:checked~.slide[data-for="photo-04"],
.photoset input#photo-05:checked~.slide[data-for="photo-05"],
.photoset input#photo-06:checked~.slide[data-for="photo-06"],
.photoset input#photo-07:checked~.slide[data-for="photo-07"],
.photoset input#photo-08:checked~.slide[data-for="photo-08"],
.photoset input#photo-09:checked~.slide[data-for="photo-09"],
.photoset input#photo-10:checked~.slide[data-for="photo-10"],
.photoset input#photo-11:checked~.slide[data-for="photo-11"],
.photoset input#photo-12:checked~.slide[data-for="photo-12"] {
   display: flex;
}

.photoset .prev,
.photoset .next {
   position: absolute;
   top: 30%;
   cursor: pointer;
   font-size: 3rem;
   color: #333;
   padding: 7rem;
}

.photoset .next {
   right: 0;
}

.photoset .prev:hover,
.photoset .next:hover {
   color: #f09022;
}

.photoset .banner {
   position: absolute;
   left: 50%;
   bottom: 0;
   transform: translateX(-50%);
   width: 100%;
   height: 12%;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, 0.5);
   color: white;
   letter-spacing: 0.05em;
}

hr {
  border: none;
  height: 3px;
  background-color: #f09022;
}