Comment définir une position pour tous les éléments d'une même gri

Bonjour tout le monde, premier post sur Alsacréation qui m'a bien souvent aidé, malheureusement impossible de trouver la solution à mon problème, je m'explique.

Je suis designer graphique avec une formation très basique en webdev, j'ai appris sur le tas en modifiant pendant des heures des trucs trouvés sur le web et en construisant mes sites comme je peux, refusant de me soumettre à un cms rigide ou a un logiciel wysiwyg qui vomit du code bien trop long. Bref, je suis en train de refaire mon portfolio en ligne, basé sur uns crolling en diagonal trouvé ici :https://codepen.io/jkantner/pen/KQPdXK et je bute.

Tout d'abord, une démo codepen avec l'ensemble du code qui me pose souci : https://codepen.io/Goo_m_Ba/pen/gdqGrP

J'ai un ensemble de cartes (chaque carte étant définie individuellement en css par la class "stack:nth-child(n)" et l'ensemble des valeurs communes (comme la perspective simulée par un transforme:rotatex/y/z) est défini par la class "cards", qui organise aussi ces petites cartes en grille via un display:grid

Le souci est le suivant : lorsque je clique sur une carte, je souhaite qu'elle se remette de face (par défaut elle est "couchée" via un effet de perspective), et qu'elle s'agrandisse pour créer un aperçu plus grand que la vignette de base, avec texte et compagnie. J'ai réussi à faire en sorte de la remettre droite (même si c'est du bon bricolage), de l'agrandir quand on clique, mais impossible de faire en sorte que chaque carte vienne au centre de l'écran, car elles sont encore contraintes par leurs positions dans la grille de "cards".

Comment overrrider cette position dans la grille de manière à ce que chaque carte vienne se placer au même endroit que les autres ? (et aussi overrider le transform parce que ma méthode à base de soustractions de rotation est pas précise et vraiment ghetto).

Je vous met les bouts de code que je pense interessants mais ça sera plus simple de comprendre avec le codepen plus haut je pense.

Par avance, je m'excuse pour le code pas ouf qui suit, c'est très amateur mais du moment que ça fonctionne vite et que c'est responsive je ne me pose pas trop de questions sur les bonnes pratiques étant donné que j'ai appris un peu au gré de mes besoins tout seul et que c'est uniquement des sites persos.

  
<div class="cards">
<div class="portfolio">
      <div class="contents">
        <p>mon chouette portfolio</p>

</div>
</div>



</a><a class="stack" href="#">

    <div class="card top">
      <div class="contents">
        <p id="projets">1 NOM DU PROJET </p>
     
      </div>
    </div>
    <div class="card shadow"></div></a><a class="stack" href="#">
    <div class="card top">
      <div class="contents">
       <p id="projets">NOM DU PROJET </p>
      </div>
    </div>
    <div class="card shadow"></div></a><a class="stack" href="#">
    <div class="card top">
      <div class="contents">
      <p id="projets">NOM DU PROJET </p>
      </div>
    </div>
    <div class="card shadow"></div></a><a class="stack" href="#">
    <div class="card top">
      <div class="contents">
        <p id="projets">NOM DU PROJET </p>
      </div>
    </div>
    <div class="card shadow"></div></a>

:root {
	font-size: 1vw;
	--cardW: 20vw;
	--cardH: 20vw;
	--cardZInc: 0.5em;
	--gap: 1.5em;
	--ttxt: 0.5em;
}
.cards {
	
	--scroll: 100px;
	display: grid;
	grid-template: repeat(12 var(--cardH)) / var(--cardW);
	grid-gap: var(--gap);
	padding-bottom: calc(var(--cardH) * 3);
	position: absolute;
	transform: translate(-20%, calc(-50% + var(--scroll))) rotateX(45deg)
		rotateZ(45deg) translateY(calc(50% - var(--scroll)));
	z-index:1;
}



.stack:nth-child(2):active .top{
	transform: 
		translateX(calc(0px - calc(var(--gap) * 1) + calc(var(--cardW) * 1)))
		translateY(calc(0px + calc(var(--gap) * 1) + calc(var(--cardW) * 1)))
		translateZ(16vw)
		rotateX(-25.1deg) 
		rotateY(27deg) 
		rotateZ(-40deg);

	
	
}
.stack:nth-child(3):active .top{
	transform: 
		translateX(calc(0px + calc(var(--gap) * 1) - calc(var(--cardW) * 0.5))) 
		translateY(calc(0px + calc(var(--gap) * 4) + calc(var(--cardW) * 1)))
		translateZ(16vw) 
		rotateX(-25.1deg) 
		rotateY(27deg) 
		rotateZ(-40deg);

}

.stack:nth-child(4):active .top{
	transform: 
		translateX(calc(0px + calc(var(--gap) * 0) - calc(var(--cardW) * 1.5)))
		translateY(calc(0px + calc(var(--gap) * 1) + calc(var(--cardW) * 1)))
		translateZ(16vw)rotateX(-25.1deg) 
		rotateY(27deg) 
		rotateZ(-40deg);
	}

.stack:active .top {
		transform-origin: center bottom;
	transform:
		translateZ(16vw)
		rotateX(-25.1deg) 
		rotateY(27deg) 
		rotateZ(-40deg);
	height:70vh;
		width:70vw;
	}