html {
		background: #000000;
		width: 100%;
		height: 100%;
	}
	body{
		display: grid;
		width: 70%;
		left: 15%;

		top: 50%;
		transform: translateY(-50%);


		position: relative;
		
    grid-template-columns: repeat(5, 1fr);
    gap: 5%;
	}
	.back {
		width: 100%;
		padding: 10px;
		background: none;
		border-radius: 30px;
		aspect-ratio: 3/4;

		transition: background 0.5s;
	}
	.back:has(img:hover){
		background: whitesmoke;
	}


	.back h2{
		display: inline-block;
		color: rgba(var(--couleurText), 0);
		text-align: center;
		position: relative;
		width: 100%;
		


		font-family: "Roboto", sans-serif;
 

		transition: color 0.5;
	}.back:has(img:hover) h2{
		color: rgba(var(--couleurText), 1);
	}


	.box {
		width: 100%;
		aspect-ratio: 1/1;

		border-radius: 30px;
		box-shadow: 0 0 30px rgba(var(--couleur), 1);
		transform: scale(1.0);

		transition: transform 0.7s, box-shadow 0.2s;
	}
	.box:hover{
		box-shadow: 0 0 0px rgba(var(--couleur), 1);
		transform: scale(1.05);
		cursor: pointer;
	}


	.box img{
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 30px;

		object-fit: contain;
	}