.solar-logos{
  position: relative;
  isolation: isolate;
}
.solar-logos__bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.solar-logos .content-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding-top: 106px;
  padding-bottom: 106px;
}

.solar-logos small{
  color: var(--red);
  margin-bottom: 24px;
  display: block;
}


@media screen and (min-width: 950px) {
.solar-logos .content-wrapper {
  grid-template-columns: 1fr 1fr;
}
  
}

/* ****************************************
SOLAR SYSTEM IMAGE STYLES
**************************************** */
.circle {
  --size: 80;
  --animation_timer: 40s;
  position: relative;
  width: calc(var(--size) * 1vw);
  height: calc(var(--size) * 1vw);
  margin: 0 auto;
  border-radius: 50%;
  animation: orbit var(--animation_timer) linear infinite;
  user-select: none;
}
.circle.circle--large{
    --size: 100;
    --animation_timer: 110s;
    animation: orbit var(--animation_timer) linear infinite;
}


.logo-solar-system{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-content: center;
  max-width: 659px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto
}

.logo-solar-system svg, .circle{
    grid-column: -1 / 1;
  grid-row: -1 / 1;
  margin: 0 auto;
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: center center;
}

.img-wrapper {
  --imgWidth: 36;
  position: absolute;
  top: calc(((var(--size) / 2) - calc(var(--imgWidth) / 2)) * 1vw);
  left: -17px;
  width: calc(var(--imgWidth) * 1px);
  height: calc(var(--imgWidth) * 1px);
  transform-origin: center center;
  border-radius: 16px;
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: calc(var(--imgWidth) * 1px);
  max-height: calc(var(--imgWidth) * 1px);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  border-radius: 16px;
}

.center-logo{
    animation: orbit 60s linear infinite;
    max-width: 160px;
}
.orbit-lines{
    opacity: 0.5;
    animation: orbit 120s linear infinite;
    max-width: 100%;
}


/* Static orbit positions */
.orbit1 { transform: rotate(0deg); }
.orbit2 { transform: rotate(72deg); }
.orbit3 { transform: rotate(144deg); }
.orbit4 { transform: rotate(216deg); }
.orbit5 { transform: rotate(288deg); }

/* Counter-rotation per image */
.orbit1 .img-wrapper {
  animation: counterOrbit0 var(--animation_timer) linear infinite;
}
.orbit2 .img-wrapper {
  animation: counterOrbit72 var(--animation_timer) linear infinite;
}
.orbit3 .img-wrapper {
  animation: counterOrbit144 var(--animation_timer) linear infinite;
}
.orbit4 .img-wrapper {
  animation: counterOrbit216 var(--animation_timer) linear infinite;
}
.orbit5 .img-wrapper {
  animation: counterOrbit288 var(--animation_timer) linear infinite;
}

/* Main orbit rotation */
@keyframes orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Individual counter-rotations */
@keyframes counterOrbit0 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes counterOrbit72 {
  from { transform: rotate(-72deg); }
  to   { transform: rotate(-432deg); }
}
@keyframes counterOrbit144 {
  from { transform: rotate(-144deg); }
  to   { transform: rotate(-504deg); }
}
@keyframes counterOrbit216 {
  from { transform: rotate(-216deg); }
  to   { transform: rotate(-576deg); }
}
@keyframes counterOrbit288 {
  from { transform: rotate(-288deg); }
  to   { transform: rotate(-648deg); }
}



@media screen and (min-width: 500px){
  .circle {
  --size: 100;
}
.circle.circle--large{
    --size: 120;
}
  .img-wrapper {
    --imgWidth: 48;
  }
.center-logo{
    /* /* animation: orbit 60s linear infinite; */
    /* max-width: 100px; */ */
}
}
@media screen and (min-width: 768px){
  .circle {
    --size: 340;
    --animation_timer: 24s;
  width: calc(var(--size) * 1px);
  height: calc(var(--size) * 1px);
  }
  .circle.circle--large{
      --size: 540;
      --animation_timer: 45s;
  }
  .img-wrapper {
    --imgWidth: 64;
      top: calc(((var(--size) / 2) - calc(var(--imgWidth) / 2)) * 1px);
  }
}

@media screen and (min-width: 950px) {
  .circle {
    --size: 230;
  }
  .circle.circle--large{
      --size: 380;
  }
  .img-wrapper {
    --imgWidth: 50;
  }  
}
@media screen and (min-width: 1024px) {
  .circle {
    --size: 260;
  }
  .circle.circle--large{
      --size: 430;
  }
  .img-wrapper {
    --imgWidth: 50;
  }  
}
@media screen and (min-width: 1280px) {
  .circle {
    --size: 340;
  }
  .circle.circle--large{
      --size: 530;
  }
  .img-wrapper {
    --imgWidth: 64;
  }  
}