@property --_off_d {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.faces-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px;
	padding: 30px 10px;
}

.pentagon-container {
	width: 20%;
	border-radius: 50%;
	padding: 1%;
	background-color: white;
	transition: all 0.5s ease;
}

.logo-container {
	display: none;
}

.logo-container:hover {
	filter: invert(1) contrast(2);
}

.pentagon-container:hover {
	filter: brightness(1.2);
	background-color: var(--red2);
}

@supports (left: calc(1px * cos(45deg))) {
	.pentagon-container:hover {
		transform: scale(1.1);
	}
}

.pentagon-container img {
	width: 100%;
	border-radius: 50%;
	transition: all 0.3s ease;
}

.pentagon-container img:hover {
	filter: invert(1) contrast(2);
}

@media only screen and (min-width: 900px) {
	.faces-container {
		--_w: 800px;
		--_sz: 140px;
		--_r: calc((var(--_w) - var(--_sz)) / 2);
		aspect-ratio: 1;
		border-radius: 50%;
		list-style-type: none;
		inline-size: var(--_w);
		padding: unset;
		position: relative;
		margin-top: 70px;
	}

	.pentagon-container {
		--_x: calc(var(--_r) + (var(--_r) * cos(var(--_off_d) + var(--_d))));
		--_y: calc(var(--_r) + (var(--_r) * sin(var(--_off_d) + var(--_d))));
		border-radius: 50%;
		display: grid;
		height: var(--_sz);
		left: var(--_x);
		place-content: center;
		position: absolute;
		top: var(--_y);
		width: var(--_sz);
		animation: spin 40s ease-in-out alternate infinite;
	}

	.faces-container .logo-container {
		/* --_d: 270deg;  */
		background-color: rgba(0,0,0,0);
		border-radius: 0;
		height: unset;
		display: grid;
	}
	.faces-container .logo-container img {
		border-radius: 0;
	}

	.faces-container .pentagon-container:nth-child(1) { --_d: 270deg; }
	.faces-container .pentagon-container:nth-child(2) { --_d: 300deg; }
	.faces-container .pentagon-container:nth-child(3) { --_d: 330deg; }
	.faces-container .pentagon-container:nth-child(4) { --_d: 0deg; }
	.faces-container .pentagon-container:nth-child(5) { --_d: 30deg; }
	.faces-container .pentagon-container:nth-child(6) { --_d: 60deg; }
	.faces-container .pentagon-container:nth-child(7) { --_d: 90deg; }
	.faces-container .pentagon-container:nth-child(8) { --_d: 120deg; }
	.faces-container .pentagon-container:nth-child(9) { --_d: 150deg; }
	.faces-container .pentagon-container:nth-child(10) { --_d: 180deg; }
	.faces-container .pentagon-container:nth-child(11) { --_d: 210deg; }
	.faces-container .pentagon-container:nth-child(12) { --_d: 240deg; }

	.faces-container .pentagon-container:nth-child(n+13) { 
		--inner_r: 1.8;
		--_r: calc((var(--_w) - var(--_sz)) / (2 * var(--inner_r)));
		--_x: calc((var(--_r) * var(--inner_r)) + (var(--_r) * cos(var(--_d) - var(--_off_d))));
		--_y: calc((var(--_r) * var(--inner_r)) + (var(--_r) * sin(var(--_d) - var(--_off_d)))); 
	}

	.faces-container .pentagon-container:nth-child(13) { --_d: 285deg;}
	.faces-container .pentagon-container:nth-child(14) { --_d: 345deg;}
	.faces-container .pentagon-container:nth-child(15) { --_d: 405deg;}
	.faces-container .pentagon-container:nth-child(16) { --_d: 465deg;}
	.faces-container .pentagon-container:nth-child(17) { --_d: 525deg;}
	.faces-container .pentagon-container:nth-child(18) { --_d: 585deg;}

	.faces-container .pentagon-container:nth-child(13) { --_d: 270deg;}
	.faces-container .pentagon-container:nth-child(14) { --_d: 330deg;}
	.faces-container .pentagon-container:nth-child(15) { --_d: 390deg;}
	.faces-container .pentagon-container:nth-child(16) { --_d: 450deg;}
	.faces-container .pentagon-container:nth-child(17) { --_d: 510deg;}
	.faces-container .pentagon-container:nth-child(18) { --_d: 570deg;}
	
	.faces-container .pentagon-container:nth-child(13) { --_d: 300deg;}
	.faces-container .pentagon-container:nth-child(14) { --_d: 360deg;}
	.faces-container .pentagon-container:nth-child(15) { --_d: 420deg;}
	.faces-container .pentagon-container:nth-child(16) { --_d: 480deg;}
	.faces-container .pentagon-container:nth-child(17) { --_d: 540deg;}
	.faces-container .pentagon-container:nth-child(18) { --_d: 600deg;}

	p {
		/* display: none; */
		font-family: ui-sans-serif, system-ui, sans-serif;
	}


	@keyframes spin {
		from {	--_off_d: 0deg		}
		to	 {	--_off_d: 360deg 	}
	}

	
	@supports not (left: calc(1px * cos(45deg))) {
		p { display: block; }
			.pentagon-container {
			left: 50% !important;
			top: 50% !important;
			transform: translate(-50%,-50%) rotate(var(--_d)) translate(var(--_r)) rotate(calc(-1*var(--_d)))
		}
	}
}