.banner {
  padding-top: 40px;
  padding-bottom: 60px;
  background-color: var(--color-black);
  background-image: url("/images/banner/dust.png");

  display: flex;
  justify-content: center;
  overflow: hidden;
}

.banner__inner {
  position: relative;
  width: 1304px;
}

.banner__image {
  display: block;
}

.banner__decor-container {
  position: absolute;
  top: 0;
  left: 0;
  mask-image: url("/images/banner/banner-mask.png");
  mask-position: center 7px;
  width: 100%;
  height: 100%;
  mix-blend-mode: darken;
  mask-repeat: no-repeat;
}

.banner__decor {
  position: absolute;
  transition: all 0.8s ease-in-out;
}

.banner__decor._blue {
  top: -20%;
  left: 80%;
  rotate: 120deg;
}

.banner__decor._blue._animated {
  top: 4%;
  left: 43%;
  rotate: 0deg;
}

.banner__decor._yellow {
  top: 30%;
  right: -20%;
  rotate: 120deg;
}

.banner__decor._yellow._animated {
  top: 20%;
  right: 42.4%;
  rotate: 0deg;
}

.banner__decor._red {
  bottom: 10%;
  left: 44%;
  rotate: -90deg;
}

.banner__decor._red._animated {
  bottom: 51%;
  left: 44%;
  rotate: 0deg;
}

.banner__decor._purple {
  top: 20%;
  left: -25%;
  rotate: -120deg;
}

.banner__decor._purple._animated {
  top: 28%;
  left: 36%;
  rotate: 0deg;
}

.banner__decor._orange {
  top: -20%;
  left: 30%;
  rotate: -120deg;
}

.banner__decor._orange._animated {
  top: 26%;
  left: 40%;
  rotate: 0deg;
}

@media (max-width: 1130px) {
  .banner__inner {
    width: 964px;
  }

  .banner__decor-container {
    mask-image: url("/images/banner/banner-mask-l.png");
    mask-position: center 10px;
    mask-size: 100%;
  }

  .banner__decor._blue._animated {
    top: 7%;
    left: 39%;
  }

  .banner__decor._yellow._animated {
    top: 26%;
    right: 41%;
  }

  .banner__decor._red._animated {
    bottom: 42%;
    left: 39%;
  }

  .banner__decor._purple._animated {
    top: 35%;
    left: 30%;
  }

  .banner__decor._orange._animated {
    top: 32%;
    left: 36%;
  }
}

@media (max-width: 950px) {
  .banner__inner {
    width: 708px;
  }

  .banner__decor-container {
    mask-image: url("/images/banner/banner-mask-m.png");
  }

  .banner__decor._blue {
    width: 170px;
  }

  .banner__decor._blue._animated {
    top: 11%;
    left: 37%;
  }

  .banner__decor._yellow {
    width: 100px;
  }

  .banner__decor._yellow._animated {
    top: 26%;
    right: 40%;
  }

  .banner__decor._red {
    width: 110px;
  }

  .banner__decor._red._animated {
    bottom: 45%;
    left: 37%;
  }

  .banner__decor._purple {
    width: 100px;
  }

  .banner__decor._purple._animated {
    top: 35%;
    left: 28%;
  }

  .banner__decor._orange {
    width: 120px;
  }

  .banner__decor._orange._animated {
    top: 32%;
    left: 35%;
  }
}

@media (max-width: 600px) {
  .banner__image {
    width: 100%;
  }

  .banner {
    padding-top: 0;
    padding-bottom: 20px;
  }

  .banner__inner {
    width: 100%;
  }

  .banner__decor-container {
    mask-image: url("/images/banner/banner-mask-s.png");
    mask-position: center top;
  }

  .banner__decor._blue {
    width: 34%;
  }

  .banner__decor._blue._animated {
    top: 7%;
    left: 31%;
  }

  .banner__decor._yellow {
    width: 21%;
  }

  .banner__decor._yellow._animated {
    top: 21%;
    right: 35%;
  }

  .banner__decor._red {
    width: 22%;
  }

  .banner__decor._red._animated {
    bottom: 52%;
    left: 33%;
  }

  .banner__decor._purple {
    width: 22%;
  }

  .banner__decor._purple._animated {
    top: 29%;
    left: 16%;
  }

  .banner__decor._orange {
    width: 27%;
  }

  .banner__decor._orange._animated {
    top: 27%;
    left: 26%;
  }
}