.rotation-section {
	display: grid;
	gap: 1.5rem;
	padding: 3rem var(--h-spacing);
	align-items: center;
	overflow: hidden;
}

#circle-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
}

@media (min-width:900px) {
	.rotation-section {
		gap: 6rem;
		grid-template-columns: 1fr 1fr;
		padding: 3rem  0 3rem var(--h-spacing);
	}
	#circle-container {
		width:130%;
	}
}



.circle {
  position: relative;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  border: 6px dotted var(--blue);
  transition: transform 0.5s;
  transform: rotate( calc( var(--customRotation) * -1));
  transform-origin: center;
  --customRotation: 0deg;
}

.circle::before, .circle::after {
	content:'';
	position: absolute;
	inset: 35%;
	height: 30%;
	width: 30%;
	aspect-ratio: 1/1;
	z-index: -1;
	background-image: url(./orbit.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.circle::before {
	animation: rotate 12s ease-in-out infinite reverse;
}

.circle::after {
	inset: 15%;
	height: 70%;
	width: 70%;
	animation: rotate 16s ease-in infinite;
}

@keyframes rotate {
  from {
	transform: rotate(0deg);
  }
  to {
	transform: rotate(360deg);
  }
}

.circle.position1 {
	--customRotation: 0deg;
}

.circle.position2 {
	--customRotation: 90deg;
}


.circle.position3 {
	--customRotation: 180deg;
}

.circle.position4 {
	--customRotation: 270deg;
}



.five-circles .circle.position1 {
	--customRotation: 0deg;
}

.five-circles .circle.position2 {
	--customRotation: 72deg;
}


.five-circles .circle.position3 {
	--customRotation: 144deg;
}

.five-circles .circle.position4 {
	--customRotation: 216deg;
}

.five-circles .circle.position5 {
	--customRotation: 288deg;
}



.image {
  position: absolute;
  transform: rotate(0);
  transition: transform 0.5s;
  width: 40%;
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%) rotate( var(--customRotation));
  border-radius: 50%;
  transform-origin: center;
  opacity: .8;
  overflow: hidden;
}

.image img {
	display: block;
	height: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
}


.circle.position1 #image1,
.circle.position2 #image2,
.circle.position3 #image3,
.circle.position4 #image4,
.circle.position5 #image5  {
	opacity: 1;
	width: 60%;
}

#image1 {
	top: 0;
	 left: 50%;
}

#image2 {
	top: 50%;
	 left: 100%;
}

#image3 {
	top: 100%;
	 left: 50%;
}

#image4 {
	top: 50%;
	 left: 0;
}


.five-circles #image1 {
	top: 0;
	 left: 50%;
}

.five-circles #image2 {
	top: 34.5%;
	 left: 97.5%;
}

.five-circles #image3 {
	top: 90.35%;
	 left: 79.39%;
}

.five-circles #image4 {
	top: 90.35%;
	 left: 20.6%;
}

.five-circles #image5 {
	top: 34.5%;
	 left: 2.45%;
}

@media (min-width:900px) {
	#image2 {
		top: 0;
	 	left: 50%;
	}
	
	#image3 {
		top: 50%;
	 	left: 100%;
	}
	
	#image4 {
		top: 100%;
	 	left: 50%;
	}
	
	#image1 {
		top: 50%;
	 	left: 0;
	}
	
	
	.five-circles #image1 {
		top: 50%;
		 left: 0;
	}
	.five-circles #image2 {
		top: 2.5%;
		 left: 34.5%;
	}
	
	.five-circles #image3 {
		top: 20.64%;
		 left: 90.35%;
	}
	
	.five-circles #image4 {
		top: 79.35%;
		 left: 90.35%;
	}
	.five-circles #image5 {
		top: 97.5%;
		 left: 34.5%;
	}
	
	
}

.circle-content-wrapper > div {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.circle-content-wrapper > div > .wp-block-group {
	grid-column: 1/-1;
	grid-row: 1;
	opacity: 0;
	position: relative;
	top: 1rem;
	transition: opacity .5s ease, top .5s ease;
	grid-column: 1/-1;
	pointer-events: none;
}

.circle-content-wrapper.position1 .circle-content1,
.circle-content-wrapper.position2 .circle-content2,
.circle-content-wrapper.position3 .circle-content3,
.circle-content-wrapper.position4 .circle-content4,
.circle-content-wrapper.position5 .circle-content5  {
	opacity: 1;
	top: 0;
	transition: opacity .5s ease .5s, top .5s ease .5s;
	pointer-events: all;
}

/* Disable Fifth Content if four is the selection */
.rotation-section:not(.five-circles) .circle-content-wrapper .circle-content5 {
	display: none !important;
	pointer-events: none !important;
}


.rotation-section .first-group {
	margin-bottom: 1.5rem;
}
.rotation-section #buttons {
	display: flex;
	gap: 1rem;
	margin-block: 1.5rem;
}
.rotation-section #buttons button {
	background: transparent;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 2.5rem;
	border: none;
	background-image: url(../../../img/circle-arrow-pink.png);
	background-size: 2.5rem;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}
.rotation-section #buttons #back {
	transform: rotate(180deg);
}


.rotation-section #buttons {
	display: flex;
	align-items: center;
}

.progress-ring {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.progress-ring__svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg); /* makes progress start at top */
}

.progress-ring__circle {
	fill: transparent;
	stroke: var(--lt-blue);           /* adjust to match your brand */
	stroke-width: 3;
	stroke-linecap: round;
}


.editor-styles-wrapper .circle-content-wrapper > div {
	display: block;
}

.editor-styles-wrapper .circle-content-wrapper div[class*=circle-content] {
	opacity: 1;
	top: 0;
	grid-row: auto;
	pointer-events: all;
	width: 100%;
	border: solid 1px grey;
	padding: 10px;
}