how to create Card flip with bouton radio - html

Question

I try to change cards face up with a radio button a bit like on this link:
https://codyhouse.co/demo/pricing-tables/index.html
For the moment I am getting to something when the responsive is below 62 rem (my mobile break point) but the result is not convincing above when the card pair is no longer in column but in row: / the pivot point remains central and suddenly the rotation will not be the same ... In fact, I would like the pivot points to always be on the cards that they pass in column or in row
So here is the code (mobile first)
Another problem with this code is that with absolute positions, it breaks my code a bit and suddenly from the "flap" div the elements are no longer in the "flip" section, which generates faults in my base code, especially for my footer ... So I would like to know how I can do to keep the "absolute" positions which make the elements turn, while keeping a well-constructed page with my card part and under my footer
Thank you in advance :)
HTML
<form>
<div class="radio-group">
<input type="radio" id="option-one" name="selector" checked><label for="option-one">Mensuel</label><input type="radio" id="option-two" name="selector"><label for="option-two">Annuel</label>
</div>
</form>
<section class='flip abo'>
<div id='flap' class='flap'>
<div class="recto">
<div class="card">
<h4 class='title-free'>Freelance</h4>
<div class='prix'>
<p>€</p>
<p class='free'><span>5</span>/mois</p>
</div>
<p class='bg-card'>1 utilisateur</p>
<p>Invités illimités</p>
<p class='bg-card'>Projets illimités</p>
<p>Un tableau Kanban/projet</p>
<p class='bg-card'>Tâches illimitées</p>
<p>Paiement des factures en ligne</p>
<p class='bg-card'>Support 5j/7</p>
</div>
<div class="card">
<h4 class='title-team'>Team</h4>
<div class='prix'>
<p>€</p>
<p class='team'>à partir de <span>9</span>/mois</p>
</div>
<p class='bg-card'>2 à 150 utilisateurs</p>
<p>Invités illimités</p>
<p class='bg-card'>Projets illimités</p>
<p>Un tableau Kanban/projet</p>
<p class='bg-card'>Tâches illimitées</p>
<p>Paiement des factures en ligne</p>
<p class='bg-card'>Support 5j/7</p>
</div>
</div>
<div class="verso">
<div class="card">
<h4 class='title-free'>Freelance</h4>
<div class='prix'>
<p>€</p>
<p class='free'><span>55</span>/ans</p>
</div>
<p class='bg-card'>1 utilisateur</p>
<p>Invités illimités</p>
<p class='bg-card'>Projets illimités</p>
<p>Un tableau Kanban/projet</p>
<p class='bg-card'>Tâches illimitées</p>
<p>Paiement des factures en ligne</p>
<p class='bg-card'>Support 5j/7</p>
</div>
<div class="card">
<h4 class='title-team'>Team</h4>
<div class='prix'>
<p>€</p>
<p class='team'>à partir de <span>99</span>/ans</p>
</div>
<p class='bg-card'>2 à 150 utilisateurs</p>
<p>Invités illimités</p>
<p class='bg-card'>Projets illimités</p>
<p>Un tableau Kanban/projet</p>
<p class='bg-card'>Tâches illimitées</p>
<p>Paiement des factures en ligne</p>
<p class='bg-card'>Support 5j/7</p>
</div>
</div>
</div>
</section>