<div class="sectors__slide circle">
  <div class="circle__content">
    <div class="circle__items">
      <div class="circle__item item-circle">
        <div class="item-circle__content circle__container">
          <div class="item-circle__scene">
            <div data-id="1" class="item-circle__circle circle_1"></div>
          </div>
        </div>
        <div class="item-circle__content container">
          <div class="item-circle__scene">
            <div data-id="2" class="item-circle__circle circle_2"></div>
          </div>
        </div>
        <div class="item-circle__content container">
          <div class="item-circle__scene">
            <div data-id="3" class="item-circle__circle circle_3"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

body {
  margin: 0;
}

.circle {
  padding: 100px 0px 100px 0px;
  min-height: 590px;
  background: #111111;
}

.circle {
  @media (max-width: 768px) {
    padding: 100px 0px 0px 0px;
  }
}

.sector-two__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sector-two__content._active {
  margin: 100px 0px 0px 0px;
}

.sector-two__content {
  @media (max-width: 768px) {
    height: 100%;
    min-height: 100%;
    margin: 20px 0px 30px 0px;
  }
}

.sector-two__content._active {
  margin: 20px 0px 0px 0px;
}

.sector-two__title {
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  padding: 0px 0px 30px 0px;
  transition: all 0.4s ease 0.6s;
}

.sector-two__title {
  @media (max-width: 480px) {
    font-size: 14px;
    line-height: 17px;
  }
}
.sector-two__items {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item-circle__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.item-circle__content:nth-child(1) {
  z-index: 14;
}

.item-circle__content:nth-child(2) {
  z-index: 13;
}

.item-circle__content:nth-child(3) {
  z-index: 12;
}

.item-circle__scene {
  position: relative;
  perspective: 800px;
  perspective-origin: 0px -80px;
  transform-style: preserve-3d;
  padding: 0px 0px 8px 0px;
}

.item-circle__scene {
  @media (max-width: 768px) {
    padding: 0px 0px 8px 0px;
  }
}

.item-circle__circle {
  cursor: pointer;
  padding-bottom: 60px;
  transform-style: preserve-3d;
  animation: rotate 35s linear infinite;
}

.item-circle__circle._active {
  z-index: 11;
}

.item-circle__circle span {
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  background: #161616;
  -webkit-text-stroke: 1px #ccba96;
  padding: 10px 0px 10px 0px;
  font-size: 28px;
  perspective-origin: center;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-circle__circle span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(22, 22, 22, 0.5);
  transform: translateZ(-5px);
}

.item-circle__circle:nth-child(n + 2) span::before {
  content: '';
  top: 2px;
  height: 80%;
}

.item-circle__circle span {
  @media (max-width: 480px) {
    font-size: 24px;
  }
}

.circle_1 span {
  min-width: 29px;
}

.circle_1 span {
  @media (max-width: 480px) {
    min-width: 45px;
  }
}

.circle_2 span {
  min-width: 38px;
}

.circle_2 span {
  @media (max-width: 480px) {
    min-width: 50px;
  }
}

.circle_3 span {
  min-width: 32px;
}

.circle_3 span {
  @media (max-width: 480px) {
    min-width: 50px;
  }
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(1turn);
  }
}

const circle_1 = document.querySelector(".circle_1");
const circle_2 = document.querySelector(".circle_2");
const circle_3 = document.querySelector(".circle_3");
const mainCircle = document.querySelector(".circle");
const mql = window.matchMedia("(min-width: 480px)");

mql.addEventListener("change", circle3D);
circle3D();

function generateLetters(element, text, colorCircle, radius) {
  const step = 360 / text.length;
  let colorIndex = 0;

  const newLetters = [...text].map((l, i) => {
    const span = document.createElement("span");

    if (l.toUpperCase() === l) {
      span.style.color = colorCircle[colorIndex % colorCircle.length];
      colorIndex++;
    }

    const deg = step * i;
    span.style.transform = transform(deg, radius);
    span.innerText = l.toUpperCase();

    return span;
  });

  element.replaceChildren(...newLetters);
}

function transform(deg, radius = 180) {
  return `rotateY(${deg}deg) translateZ(${radius}px)`;
}

function circle3D() {
  if (!mainCircle) return;

  if (mql.matches) {
    const radius = 180;
    const content_1 = "DevelopmentDevelopmentDevelopmentDevelopment";
    const color_1 = ["#ccba96", "#161616", "#ccba96", "#161616"];
    generateLetters(circle_1, content_1, color_1, radius);

    const content_2 = "DesignDesignDesignDesignDesign";
    const color_2 = ["#ccba96", "#161616", "#ccba96", "#161616", "#ccba96"];
    generateLetters(circle_2, content_2, color_2, radius);

    const content_3 = "MarketingMarketingMarketingMarketing";
    const color_3 = ["#ccba96", "#161616", "#ccba96", "#161616"];
    generateLetters(circle_3, content_3, color_3, radius);
  } else {
    const radius = 140;
    const content_1 = "DevelopmentDevelopment";
    const color_1 = ["#ccba96", "#161616"];
    generateLetters(circle_1, content_1, color_1, radius);

    const content_2 = "DesignDesignDesign";
    const color_2 = ["#ccba96", "#161616", "#ccba96"];
    generateLetters(circle_2, content_2, color_2, radius);

    const content_3 = "MarketingMarketing";
    const color_3 = ["#ccba96", "#161616"];
    generateLetters(circle_3, content_3, color_3, radius);
  }
}