.content {
  background: linear-gradient(71.38deg, #1A154A 8.65%, #3a2693 30.96%);
}

.banner .inner {
  max-width: 80rem;
}

.bg {
  background: transparent;
}
.bg-left {
  background-position: top -1rem left -5rem;
}
.bg-right {
  background-position: bottom -.5rem right -3rem;
}

.visual {
  z-index: 5;
}
.art {
  z-index: 2;
}

.art-video {
  top: 0;
  left: 22%;
  max-width: 62%;
  z-index: 4;
}

.racket-1 {
  top: 39%;
  right: 7%;
  max-width: 22%;
  animation: racket-1 10s ease-in-out infinite;
}
@keyframes racket-1 {
  5%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-.5rem) rotate(5deg);
  }
}

.ball-1 {
  top: 51%;
  left: 22%;
  max-width: 14%;
  animation: ball-1 6s ease-in-out infinite;
  animation-delay: 1.5s;
}
@keyframes ball-1 {
  5%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.5rem) rotate(8deg);
  }
}

.ball-2 {
  top: 32%;
  left: 8%;
  max-width: 7.5%;
  animation: ball-2 4.5s ease-in-out infinite;
  animation-delay: 1s;
}
@keyframes ball-2 {
  5%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0) rotate(5deg);
  }
}

.ball-3 {
  top: 40%;
  left: 15%;
  max-width: 5.5%;
  animation: ball-3 4.5s ease-in-out infinite;
}
@keyframes ball-3 {
  5%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-.5rem) rotate(-3deg);
  }
}

.ball-4 {
  top: 19%;
  left: 18%;
  max-width: 14%;
  animation: ball-4 10s ease-in-out infinite;
  animation-delay: .5s;
}
@keyframes ball-4 {
  5%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-.5rem) rotate(-3deg);
  }
}

.ball-5 {
  top: 19%;
  right: 25%;
  max-width: 11%;
  animation: ball-5 14s ease-in-out infinite;
  animation-delay: 1.5s;
}
@keyframes ball-5 {
  5%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0) rotate(-12deg);
  }
}

.ball-6 {
  top: 13.5%;
  right: 31%;
  max-width: 11%;
  animation: ball-6 9s ease-in-out infinite;
}
@keyframes ball-6 {
  5%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0) rotate(10deg);
  }
}

.ball-7 {
  top: 24%;
  right: 16.3%;
  max-width: 4%;
  animation: ball-7 7s ease-in-out infinite;
}
@keyframes ball-7 {
  5%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-.2rem) rotate(-3deg);
  }
}

.ball-8 {
  top: 38.5%;
  right: 14%;
  max-width: 6%;
  animation: ball-8 5s ease-in-out infinite;
  animation-delay: 1.5s;
}
@keyframes ball-8 {
  5%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1rem) rotate(5deg);
  }
}

.texts {
  margin-top: -17%;
}
.texts .text-heading {
  font-size: min(clamp(.8rem, 2.1vh, 1.8rem), 2.9vw);
  line-height: min(clamp(1rem, 2.3vh, 2rem), 3.1vw);
  color: #fff;
}
.texts .text {
  font-weight: 800;
  font-size: min(clamp(2rem, 5vh, 3rem), 6vw);
  line-height: min(clamp(2.2rem, 5.5vh, 3.5rem), 6.3vw);
  color: #fff;
}
.texts .text-extra {
  font-size: min(clamp(.5rem, 1.7vh, 1.2rem), 2vw);
  line-height: min(clamp(.7rem, 2vh, 1.5rem), 2.3vw);
  color: rgb(255 255 255 / 70%);
}
.texts .delimiter {
  font-weight: 200;
  color: #7EB6FF;
}

.ratings {
  background: rgba(0, 0, 0, 0.2);
}