Как заставить расти только один блок и позволить ему «снять флажок» при повторном нажатии ⇐ CSS

[Anonymous]

Итак, я пишу небольшую программу для веб-сайта, в которой я хочу, чтобы блоки при нажатии увеличивались почти до размера окна, чтобы на них можно было отображать текст. Однако, когда я использую флажок, по какой-то причине все поля увеличиваются. А когда я использую радио, все поля растут, и я не могу нажать, чтобы они исчезли.

Код: Выделить всё

.games {
display: flex;
flex-wrap: wrap;
align-items: center;
/* background-color:  rgba(0, 0, 47,0.3); */
justify-content: space-evenly;
}

.games:has(input:checked) .game-list {
width: 50vw;
height: 100vh;
margin: 50px;
}

.game-list {
margin: 30px;
;
padding: 20px;
height: 275px;
width: 325px;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid gray;
background: rgba(255, 75, 255, 0.1);
box-shadow: 0 8px 40px 0 rgba(45, 57, 231, 0.37);
backdrop-filter: blur( 4px);
-webkit-backdrop-filter: blur( 4px);
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18);
}

.game-list:hover {
transform: scale(1.05);
}

Код: Выделить всё

[img]https://rideawavedesign.com/wp-content/uploads/2021/06/dnd-dice-level-up-birthday-card-1.jpg[/img]
Chapter 1: 
Step-by-Step





[img]https://miro.medium.com/v2/0*ggxUIJLB6dBwLHKo.jpg[/img]
Chapter 2: 
Races





[img]https://miro.medium.com/v2/resize:fit:1080/1*Z_eV_OUsPV359E-ZUb-dbw.jpeg[/img]
Chapter 3: 
Classes





[img]https://www.greenmangaming.com/blog/wp-content/uploads/2020/01/DnD-Alignments.png[/img]
Chapter 4: 
Personality and Background





[img]https://i.pinimg.com/736x/da/bb/c5/dabbc5d29cb413808c9bd61fbbef822d.jpg[/img]
Chapter 5: 
Equipment





[img]https://i.postimg.cc/TP6zYYcx/Multiclass.webp[/img]
Chapter 6: 
Customization options

Я пробовал использовать другой скрытый идентификатор и метку для =. Но несмотря ни на что кажется, что все ящики вырастут.

Подробнее здесь: https://stackoverflow.com/questions/785 ... cked-again