!HELP! Carrousel html/css only

Bonjour, je suis sur un projet html/css only et j'essaie d'adapter un carrousel trouvé sur internet, mon problème est que je n'arrive pas à adapter le css pour que mon carrousel fonctionne avec plus de 3 items (dans l'exemple prit sur internet il n'y a que 3 items dans le carrousel).
Voici le lien de la template prise sur internet: https://codepen.io/aybukeceylan/pen/RwrRPoO
Et voici mon code actuel:

<!-- HTML -->
<section id="carrousel">
                <div class="contain">
                    <input type="radio" name="slider" id="item-1" checked>
                    {{ range $key, $value := (index .) }}
                    <input type="radio" name="slider" id="item-{{$key}}">
                    {{end}}
                    <div class="cards">
                        {{ range $key, $value := (index .) }}
                        <label class="card" for="item-{{$key}}" id="song-{{$key}}">
                            <img src="{{$value.Image}}"
                                alt="song">
                        </label>
                        {{end}}
                    </div>
                    <div class="player">
                        <div class="upper-part">
                            <div class="play-icon">
                                <svg width="20" height="20" fill="#2992dc" stroke="#2992dc" stroke-linecap="round"
                                    stroke-linejoin="round" stroke-width="2" class="feather feather-play"
                                    viewBox="0 0 24 24">
                                    <defs />
                                    <path d="M5 3l14 9-14 9V3z" />
                                </svg>
                            </div>
                            <div class="info-area" id="test">
                                {{ range $key, $value := (index .) }}
                                <label class="song-info" id="song-info-1">
                                    <div class="title">{{$value.Id}}</div>
                                    <div class="sub-line">
                                        <div class="subtitle">{{$value.Name}}</div>
                                        <div class="time">4.05</div>
                                    </div>
                                </label>
                                {{end}}
                            </div>
                        </div>
                        <div class="progress-bar">
                            <span class="progress"></span>
                        </div>
                    </div>
                </div>
            </section>

<!-- CSS -->
#item-1:checked~.cards #song-3, #item-2:checked~.cards #song-1, #item-3:checked~.cards #song-2 {
    transform: translatex(-40%) scale(0.8);
    opacity: 0.4;
    z-index: 0;
}

#item-1:checked~.cards #song-2, #item-2:checked~.cards #song-3, #item-3:checked~.cards #song-1 {
    transform: translatex(40%) scale(0.8);
    opacity: 0.4;
    z-index: 0;
}

#item-1:checked~.cards #song-1, #item-2:checked~.cards #song-2, #item-3:checked~.cards #song-3 {
    transform: translatex(0) scale(1);
    opacity: 1;
    z-index: 1;
}

#item-1:checked~.cards #song-1 img, #item-2:checked~.cards #song-2 img, #item-3:checked~.cards #song-3 img {
    box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
}

Le CSS est fait de sorte à ne fonctionner qu'avec 3 items et je cherche donc une solution pour faire en sorte que ce carrousel fonctionne avec une taille d'item prédéfinie (52)