JustAnime/src/components/banner/Banner.css

.spotlight {
  overflow: hidden;
}

.spotlight-overlay {
  width: 100.1%;
  height: 100.1%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  background: radial-gradient(
      circle at 130% center,
      rgba(32, 31, 49, 0) 50%,
      rgba(32, 31, 49, 0.5) 60%,
      rgba(32, 31, 49, 1) 80%,
      rgba(32, 31, 49, 1) 100%
    ),
    linear-gradient(
      to top,
      rgba(32, 31, 49, 1) 0%,
      rgba(32, 31, 49, 0) 20%,
      rgba(32, 31, 49, 0) 100%
    ),
    linear-gradient(
      to left,
      rgba(32, 31, 49, 1) 0%,
      rgba(32, 31, 49, 0) 20%,
      rgba(32, 31, 49, 0) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(32, 31, 49, 1) 0%,
      rgba(32, 31, 49, 0) 20%,
      rgba(32, 31, 49, 0) 100%
    );

  z-index: 1;
}
@media only screen and (max-width: 1300px) {
  .spotlight-overlay {
    background: radial-gradient(
      circle at 130% center,
      rgba(32, 31, 49, 0) 50%,
      rgba(32, 31, 49, 0.5) 60%,
      rgba(32, 31, 49, 1) 80%,
      rgba(32, 31, 49, 1) 100%
    ),
    linear-gradient(
      to top,
      rgba(32, 31, 49, 1) 0%,
      rgba(32, 31, 49, 0) 20%,
      rgba(32, 31, 49, 0) 100%
    ),
    linear-gradient(
      to left,
      rgba(32, 31, 49, 1) 0%,
      rgba(32, 31, 49, 0) 20%,
      rgba(32, 31, 49, 0) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(32, 31, 49, 1) 0%,
      rgba(32, 31, 49, 0) 50%,
      rgba(32, 31, 49, 0) 100%
    );
  }
}
@media only screen and (max-width: 1200px) {
  .spotlight-overlay {
    background: radial-gradient(
      circle at 100% center,
      rgba(32, 31, 49, 0) 50%,
      rgba(32, 31, 49, 0.5) 60%,
      rgba(32, 31, 49, 1) 95%,
      rgba(32, 31, 49, 1) 100%
    ),
    linear-gradient(
      to top,
      rgba(32, 31, 49, 1) 0%,
      rgba(32, 31, 49, 0) 20%,
      rgba(32, 31, 49, 0) 100%
    ),
    linear-gradient(
      to left,
      rgba(32, 31, 49, 1) 0%,
      rgba(32, 31, 49, 0) 20%,
      rgba(32, 31, 49, 0) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(32, 31, 49, 1) 0%,
      rgba(32, 31, 49, 0) 70%,
      rgba(32, 31, 49, 0) 100%
    );
  }
}
@media only screen and (max-width: 900px) {
  .spotlight-overlay {
    background: radial-gradient(
      circle at 60% center,
      rgba(32, 31, 49, 0) 50%,
      rgba(32, 31, 49, 0.5) 85%,
      rgba(32, 31, 49, 1) 95%,
      rgba(32, 31, 49, 1) 100%
    ),
    linear-gradient(
      to top,
      rgba(32, 31, 49, 1) 0%,
      rgba(32, 31, 49, 0) 70%,
      rgba(32, 31, 49, 0) 100%
    ),
    linear-gradient(
      to left,
      rgba(32, 31, 49, 1) 0%,
      rgba(32, 31, 49, 0) 20%,
      rgba(32, 31, 49, 0) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(32, 31, 49, 1) 0%,
      rgba(32, 31, 49, 0) 70%,
      rgba(32, 31, 49, 0) 100%
    ),
    linear-gradient(
      to right,
      rgba(32, 31, 49, 1) 0%,
      rgba(32, 31, 49, 0) 15%,
      rgba(32, 31, 49, 0) 100%
    );
  }
}