.carousel {
    position: relative;
    width: 90%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    margin: 0 auto;
}
.carousel input[type="radio"] {
    display: none;
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.btn {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    cursor: pointer;
    user-select: none;
    z-index: 10;
}
.btn::before,.btn::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-top: solid 2px #203864;
    border-right: solid 2px #203864;
    transform: rotate(45deg) skew(15deg,15deg);
}
.btn::after {
    transform: translateX(-6px) rotate(45deg) skew(15deg,15deg);
}
.btn.prev {
    transform: rotate(180deg);
}

.prev { left: 12px; }
.next { right: 12px; }

#s1-1:checked ~ .s1-1,
#s1-2:checked ~ .s1-2, 
#s2-1:checked ~ .s2-1, 
#s2-2:checked ~ .s2-2, 
#s2-3:checked ~ .s2-3,
#s3-1:checked ~ .s3-1,
#s3-2:checked ~ .s3-2,
#s3-3:checked ~ .s3-3,
#s4-1:checked ~ .s4-1,
#s4-2:checked ~ .s4-2,
#s4-3:checked ~ .s4-3,
#s5-1:checked ~ .s5-1,
#s5-2:checked ~ .s5-2,
#s6-1:checked ~ .s6-1,
#s6-2:checked ~ .s6-2,
#s7-1:checked ~ .s7-1,
#s7-2:checked ~ .s7-2,
#s8-1:checked ~ .s8-1,
#s8-2:checked ~ .s8-2 {
    opacity: 1;
}

#s1-1:checked ~ .btn-s1-1,
#s1-2:checked ~ .btn-s1-2,
#s2-1:checked ~ .btn-s2-1,
#s2-2:checked ~ .btn-s2-2,
#s2-3:checked ~ .btn-s2-3,
#s3-1:checked ~ .btn-s3-1,
#s3-2:checked ~ .btn-s3-2,
#s3-3:checked ~ .btn-s3-3,
#s4-1:checked ~ .btn-s4-1,
#s4-2:checked ~ .btn-s4-2,
#s4-3:checked ~ .btn-s4-3,
#s5-1:checked ~ .btn-s5-1,
#s5-2:checked ~ .btn-s5-2,
#s6-1:checked ~ .btn-s6-1,
#s6-2:checked ~ .btn-s6-2,
#s7-1:checked ~ .btn-s7-1,
#s7-2:checked ~ .btn-s7-2,
#s8-1:checked ~ .btn-s8-1,
#s8-2:checked ~ .btn-s8-2 {
    display: block;
}

@media screen and (max-width:750px) {
    .prev { left: 2px; }
    .next { right: 2px; }
}