How do I make all radio labels responsive to input on any combination of browser and operating system?

Question

I am trying to implement an image carousel on a webpage. I would like it to show 5 different gifs in a tiered format where if I click on any one of them, it will swap to the front of the "pile" of images. I have gotten it to work just fine on...

Linux: Firefox Google Chrome

Windows: Firefox

It does NOT work on...

Windows: Chrome Edge

How do I get it to work regardless of the operating system and browser?

HTML

   <div class="applications">
                    <section class="carousel" id="carousel">
                        <input type="radio" name="carouselItem" id="img1" checked>
                        <input type="radio" name="carouselItem" id="img2">
                        <input type="radio" name="carouselItem" id="img3">
                        <input type="radio" name="carouselItem" id="img4">
                        <input type="radio" name="carouselItem" id="img5">
                        <label for="img1" id="gif1"><img src="dist/gifs/tictactoe.gif"></label>
                        <label for="img2" id="gif2"><img src="dist/gifs/calculator.gif"></label>
                        <label for="img3" id="gif3"><img src="dist/gifs/etchasketch.gif"></label>
                        <label for="img4" id="gif4"><img src="dist/gifs/library.gif"></label>
                        <label for="img5" id="gif5"><img src="dist/gifs/todolist.gif"></label>
                    </section>
                </div>

CSS

.carousel {
    position:relative;
    height:100%;
    width:400px;
    perspective:1800px;
    transform-style:preserve-3d;
}

input[type='radio'] {
    position:relative;
    top:108%;
    left:50%;
    width:18px;
    height:18px;
    margin:0 15px 0 0;
    opacity:0.4;
    transform:translateX(-83px);
    cursor:pointer;
    visibility:hidden;
}

input[type='radio']:nth-child(5) {
    margin-right:0px;
}

input[type='radio']:checked {
    opacity:1;
}

.carousel label, .carousel label img {
    position:absolute;
    width:400px;
    height:400px;
    left:0;
    top:0;
    border:2px solid black;
    border-radius:5px;
    box-shadow:2px 2px 10px 2px rgba(0,0,0,.5);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform 400ms ease-in-out;
}

#img1:checked ~ #gif1,
    #img2:checked ~ #gif2,
        #img3:checked ~ #gif3,
            #img4:checked ~ #gif4,
                #img5:checked ~ #gif5 {
transform:translate3d(0%,0,0px);
        }

#img1:checked ~ #gif2,
    #img2:checked ~ #gif3,
        #img3:checked ~ #gif4,
            #img4:checked ~ #gif5,
                #img5:checked ~ #gif1 {
transform:translate3d(40%,0,-100px);
        }


#img1:checked ~ #gif3,
    #img2:checked ~ #gif4,
        #img3:checked ~ #gif5,
            #img4:checked ~ #gif1,
                #img5:checked ~ #gif2 {
transform:translate3d(80%,0,-250px);
        }

#img1:checked ~ #gif4,
    #img2:checked ~ #gif5,
        #img3:checked ~ #gif1,
            #img4:checked ~ #gif2,
                #img5:checked ~ #gif3 {
transform:translate3d(-80%,0,-250px);
        }

#img1:checked ~ #gif5,
    #img2:checked ~ #gif1,
        #img3:checked ~ #gif2,
            #img4:checked ~ #gif3,
                #img5:checked ~ #gif4 {
transform:translate3d(-40%,0,-100px);
        } ```