.unconventional {
  grid-column: span 3;
  border-radius: 3.2rem;
  overflow: hidden;
  position: relative;
  padding: 0.3rem;
}

.unconventional > .bg {
  position: absolute;
  inset: -150%;
  background: #000;
  z-index: -1;
  will-change: transform;
  background: conic-gradient(
      from 180deg at 50% 50%,
      #e3e3e8 -44.72deg,
      #e3e3e8 20.75deg,
      #e3e3e8 70.53deg,
      #82edff 121.8deg,
      #e3e3e8 184.37deg,
      #e3e3e8 252.36deg,
      #e3e3e8 315.28deg,
      #e3d6ff 380.75deg
    ),
    linear-gradient(0deg, #f8f7f9, #f8f7f9);

  display: block;

  transform-origin: center center;
  animation: unconventionalSpin 10s linear infinite;
}

@keyframes unconventionalSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.unconventional > .content {
  width: 100%;
  height: 100%;
  border-radius: 40px;
  display: grid;
  gap: 3.2rem;
  align-items: start;
  align-content: start;
  padding: 3.3rem 3.7rem;
  background-color: #f8f7f9;
}

.unconventional > .content > h2 {
  font-family: "Lufga", sans-serif;
  font-size: 3.2rem;
  letter-spacing: -1.5%;
  line-height: 130%;
  color: #6f6f7d;
  font-weight: 600;
  padding: 0 0.8rem;
}

.unconventional > .content > p {
  font-family: "Lufga", sans-serif;
  font-size: 2.4rem;
  letter-spacing: -1.5%;
  line-height: 158%;
  color: #a6a6a6;
  padding: 0 0.8rem;
}

@media screen and (max-width: 810px) {
  .unconventional > .content {
    gap: 2.8rem;
    padding: 3.2rem 2.4rem;
  }

  .unconventional > .content > h2 {
    font-size: 2.8rem;
  }

  .unconventional > .content > p {
    font-size: 2.1rem;
  }
}

@media screen and (max-width: 600px) {
  .unconventional > .content {
    gap: 2.4rem;
    padding: 2.4rem 1.6rem;
  }

  .unconventional > .content > h2 {
    font-size: 2.4rem;
  }

  .unconventional > .content > p {
    font-size: 1.8rem;
  }
}