:root {
  --color-dark-yellow: rgba(92.16%, 62.75%, 0%, 0.25);
  --color-light-yellow: rgb(100%, 96.47%, 81.18%, 0.6);
  --color-light-red: rgb(92.16%, 39.61%, 0%, 0.1);
}

html,
body {
  overflow-x: clip;
}

.layout-block {
  position: relative;
  overflow-y: visible;
}

.layout-block[class*="circle-"]::before,
.layout-block[class*="circle-"]::after {
  content: "";
  position: absolute;
  width: var(--circle-size, 40rem);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: var(--circle-color, transparent);
  transform: translate(var(--circle-x, 0), var(--circle-y, 0));
  z-index: -1;
}

.circle-2::before {
  --circle-size: 40rem;
  --circle-color: var(--color-dark-yellow);
  --circle-x: -40%;
  --circle-y: -20%;
  bottom: 0;
  left: 0;
}

.circle-3::after {
  --circle-size: 90rem;
  --circle-color: var(--color-light-yellow);
  --circle-x: 90%;
  --circle-y: 40%;
  bottom: 0;
  right: 0;
}

.circle-4::before {
  --circle-size: 40rem;
  --circle-color: var(--color-light-yellow);
  --circle-x: -40%;
  --circle-y: -20%;
  bottom: 0;
  left: 0;
}

.circle-5::before {
  --circle-size: 40rem;
  --circle-color: var(--color-dark-yellow);
  --circle-x: 55%;
  --circle-y: -20%;
  bottom: 0;
  right: 0;
}

.circle-5::after {
  --circle-size: 40rem;
  --circle-color: var(--color-light-red);
  --circle-x: -75%;
  --circle-y: 45%;
  bottom: 0;
  left: 0;
}

.circle-6::before {
  --circle-size: 60rem;
  --circle-color: var(--color-light-yellow);
  --circle-x: 0;
  --circle-y: -25%;
  bottom: 0;
  right: 0;
}

.circle-7::before {
  --circle-size: 40rem;
  --circle-color: #eb6500;
  --circle-x: 60%;
  --circle-y: 0;
  bottom: 0;
  right: 0;
}

.circle-8::before {
  --circle-size: 40rem;
  --circle-color: var(--color-light-yellow);
  --circle-x: 60%;
  --circle-y: 70%;
  bottom: 0;
  right: 0;
}

.circle-8::after {
  --circle-size: 40rem;
  --circle-color: var(--color-light-red);
  --circle-x: -40%;
  --circle-y: 30%;
  bottom: 0;
  left: 0;
}

.circle-9::after {
  --circle-size: 75rem;
  --circle-color: var(--color-light-yellow);
  --circle-x: -30%;
  --circle-y: 0;
  bottom: 0;
  left: 0;
}

.circle-10::after {
  --circle-size: 90rem;
  --circle-color: var(--color-light-yellow);
  --circle-x: 60%;
  --circle-y: 0;
  bottom: 0;
  right: 0;
}

.circle-11::after {
  --circle-size: 50rem;
  --circle-color: var(--color-light-yellow);
  --circle-x: 30rem;
  --circle-y: 0;
  top: 0;
  right: 0;
}

.circle-11::before {
  --circle-size: 50rem;
  --circle-color: var(--color-light-red);
  --circle-x: -30rem;
  --circle-y: 150%;
  top: 10%;
  left: 0;
}

.circle-12::after {
  --circle-size: 50rem;
  --circle-color: var(--color-dark-yellow);
  --circle-x: 30rem;
  --circle-y: 0;
  top: -70%;
  right: 0;
}

.circle-13::after {
  --circle-size: 70rem;
  --circle-color: var(--color-light-yellow);
  --circle-x: 30rem;
  --circle-y: -40%;
  top: 0;
  right: 0;
}

.circle-13::before {
  --circle-size: 70rem;
  --circle-color: var(--color-dark-yellow);
  --circle-x: 0;
  aspect-ratio: 1 / 1;
  height: 70rem;
  --circle-y: 70%;
  --circle-x: -30rem;
  top: 0;
  bottom: 0;
}

.moments_circles {
  position: relative;
}

.concept-block {
  position: relative;
}

.concept-block::after {
  content: "";
  position: absolute;
  width: 60rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: var(--color-light-red);
  transform: translate(0, 0);
  z-index: -1;
  bottom: 0;
  left: -40%;
}

@media (max-width: 768px) {
  .circle-13::before,
  .circle-2::before,
  .circle-3::after,
  .circle-4::before,
  .circle-5::before,
  .circle-5::after,
  .circle-7::before {
    display: none;
  }

  .moments_circles::before {
    content: "";
    position: absolute;
    width: var(--circle-size, 40rem);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--circle-color, transparent);
    transform: translate(var(--circle-x, 0), var(--circle-y, 0));
    z-index: -1;
    --circle-size: 50rem;
    --circle-color: var(--color-light-yellow);
    --circle-x: 75%;
    --circle-y: 0;
    top: 0;
    right: 0;
  }

  .moments_circles::after {
    content: "";
    position: absolute;
    width: var(--circle-size, 40rem);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--circle-color, transparent);
    transform: translate(var(--circle-x, 0), var(--circle-y, 0));
    z-index: -1;
    --circle-size: 40rem;
    --circle-color: var(--color-light-red);
    --circle-x: -70%;
    --circle-y: 0;
    bottom: 0;
    left: 0;
  }
  .circle-13::before {
    --circle-size: 55rem;
  }

  .circle-14::before {
    --circle-size: 60rem;
    --circle-color: var(--color-light-red);
    --circle-x: 30rem;
    --circle-y: -100%;
    top: 0;
    right: 0;
  }

  .circle-6::before {
    --circle-size: 50rem;
    --circle-x: 20%;
    --circle-y: -25%;
  }

  .circle-9::after {
    --circle-size: 35rem;
    --circle-x: -30%;
    --circle-y: -10%;
  }

  .circle-8::before {
    --circle-size: 29rem;
    --circle-color: var(--color-light-yellow);
    --circle-x: 75%;
    --circle-y: 70%;
    bottom: 0;
    right: 0;
  }

  .circle-8::after {
    --circle-size: 33rem;
    --circle-color: var(--color-light-red);
    --circle-x: -72%;
    --circle-y: 30%;
    bottom: 0;
    left: 0;
  }

  .circle-10::after {
    --circle-size: 50rem;
  }

  .circle-11::after {
    --circle-size: 30rem;
    --circle-x: 50%;
  }
  .circle-11::before {
    --circle-size: 30rem;
    --circle-x: -60%;
    --circle-y: 140%;
  }

  .circle-12::after {
    top: -160%;
    --circle-size: 30rem;
    --circle-x: 60%;
  }

  .concept-block::after {
    width: 50rem;
    transform: translate(0, 0);
    left: -20%;
    bottom: 0%;
  }
}

@media (max-width: 630px) {
  .concept-block::after {
    width: 40rem;
    transform: translate(0, 0);
    left: -20%;
    bottom: 0%;
  }
}

@media (max-width: 530px) {
  .circle-6::before {
    --circle-size: 30rem;
    --circle-x: 20%;
    --circle-y: -25%;
  }

  .circle-9::after {
    --circle-size: 25rem;
    --circle-y: -20%;
  }

  .circle-10::after {
    --circle-size: 40rem;
    --circle-y: -40%;
  }

  .concept-block::after {
    width: 40rem;
    transform: translate(0, 0);
    left: -36%;
    bottom: 48%;
  }
}

@media (max-width: 430px) {
  .concept-block::after {
    width: 30rem;
    transform: translate(0, 0);
    left: -36%;
    bottom: 50%;
  }
}