:root {
  --panel-count: 24;
  --panel-width: calc(var(--font-size) / 1.9);
  --panel-height: calc(var(--font-size) * 1.75);
  --font-size: 50px;
  --radius: calc(var(--font-size) * 2);
  --angle-step: calc(360deg / var(--panel-count));
  --left-step: calc(var(--panel-width) / -1);
}

.rotating-logo.is-navbar {
  --panel-count: 25;
  --panel-width: calc(var(--font-size) / 1.9);
  --panel-height: calc(var(--font-size) * 1.75);
  --font-size: 22px;
  --radius: calc(var(--font-size) * 2);
  --angle-step: calc(360deg / var(--panel-count));
  --left-step: calc(var(--panel-width) / -1);
  width: 8rem;
  height: 5rem;
}

.rotating-logo .w-embed {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 500px;
  perspective-origin: 50% calc(50% - 150px);
  height: 100%;
  width: 100%;
}

.scene {
  position: relative;
  transform-style: preserve-3d;
  transform: scale(0.9);
}

.banner {
  display: flex;
  transform-style: preserve-3d;
  animation: rotate 12s infinite linear;
}

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

.panel {
  position: absolute;
  width: var(--panel-width);
  height: var(--panel-height);
  overflow: hidden;
  transform: translate(-50%, -50%) rotateY(var(--angle)) translateZ(var(--radius));
}

.panel::before {
  position: absolute;
  left: var(--left);
  content: "bre lorraine       bre lorraine";
  transform: translateZ(0);
  font-size: var(--font-size);
  letter-spacing: -0.04em;
  width: max-content;
}

/* Generate variables per panel */
.panel:nth-child(n) {
  --angle: calc((var(--n) - 1) * var(--angle-step));
  --left: calc((var(--n) - 1) * var(--left-step));
}

/* Fallback for current CSS systems: manually assign each panel */
.panel:nth-child(1) {
  --n: 1;
}
.panel:nth-child(2) {
  --n: 2;
}
.panel:nth-child(3) {
  --n: 3;
}
.panel:nth-child(4) {
  --n: 4;
}
.panel:nth-child(5) {
  --n: 5;
}
.panel:nth-child(6) {
  --n: 6;
}
.panel:nth-child(7) {
  --n: 7;
}
.panel:nth-child(8) {
  --n: 8;
}
.panel:nth-child(9) {
  --n: 9;
}
.panel:nth-child(10) {
  --n: 10;
}
.panel:nth-child(11) {
  --n: 11;
}
.panel:nth-child(12) {
  --n: 12;
}
.panel:nth-child(13) {
  --n: 13;
}
.panel:nth-child(14) {
  --n: 14;
}
.panel:nth-child(15) {
  --n: 15;
}
.panel:nth-child(16) {
  --n: 16;
}
.panel:nth-child(17) {
  --n: 17;
}
.panel:nth-child(18) {
  --n: 18;
}
.panel:nth-child(19) {
  --n: 19;
}
.panel:nth-child(20) {
  --n: 20;
}
.panel:nth-child(21) {
  --n: 21;
}
.panel:nth-child(22) {
  --n: 22;
}
.panel:nth-child(23) {
  --n: 23;
}
.panel:nth-child(24) {
  --n: 24;
}

/**/
:root {
  --font-size: 44px;
}
.panel::before {
  content: "bre lorraine    bre lorraine";
  letter-spacing: -0.01em;
}