.banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #6eabe4 0%, #78b4e8 40%, #a9d0f1 68%, #d4e7f8 100%);
}

.banner-frame {
  position: relative;
  aspect-ratio: 1440 / 1117;
  overflow: hidden;
}

.banner-sky {
  position: absolute;
  left: -76.6667%;
  top: -79.9463%;
  width: 210.0694%;
  height: 184.5121%;
  overflow: hidden;
  pointer-events: none;
}

.banner-sky img {
  position: absolute;
  top: 0;
  left: -21.73%;
  width: 122.17%;
  height: 100%;
  max-width: none;
}

.banner-wash {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
}

.banner-wash-color {
  height: 100%;
  background: linear-gradient(to bottom, #7badff 0%, rgba(123, 173, 255, 0) 102.55%);
  mix-blend-mode: color;
}

.banner-wash-color-end {
  background: linear-gradient(to bottom, #7badff 0%, rgba(123, 173, 255, 0) 100%);
}

.banner-wash-overlay {
  height: 69.74%;
  background: linear-gradient(to bottom, #7badff 0%, rgba(123, 173, 255, 0) 102.55%);
  mix-blend-mode: overlay;
}

.banner-wash-soft {
  height: 100%;
  background: linear-gradient(to bottom, #fbfbf7 0%, rgba(123, 173, 255, 0) 100%);
  mix-blend-mode: soft-light;
  opacity: 0.2;
}

.banner-flares {
  position: absolute;
  inset: 0;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.banner-flare {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: soft-light;
}

.banner-flare-spin {
  position: relative;
  flex: none;
  opacity: 0.5;
  transform: rotate(-43.36deg) scaleY(0.94) skewX(19.35deg);
}

.banner-flare-spin img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
}

.banner-flare-1 {
  left: -54.264%;
  top: -36.959%;
  width: 158.116%;
  height: 130.927%;
}

.banner-flare-1 .banner-flare-spin {
  width: 40.59%;
  height: 123.49%;
}

.banner-flare-1 img {
  left: -10.82%;
  top: -5.54%;
  width: 121.64%;
}

.banner-flare-2 {
  left: -47.233%;
  top: -28.399%;
  width: 144.056%;
  height: 113.808%;
}

.banner-flare-2 .banner-flare-spin {
  width: 31.12%;
  height: 142.06%;
}

.banner-flare-2 img {
  left: -15.49%;
  top: -5.54%;
  width: 130.98%;
}

.banner-flare-3 {
  left: -39.689%;
  top: -19.215%;
  width: 128.967%;
  height: 95.438%;
}

.banner-flare-3 .banner-flare-spin {
  width: 18.68%;
  height: 169.4%;
}

.banner-flare-3 img {
  left: -28.83%;
  top: -5.54%;
  width: 157.67%;
}

.banner-copy {
  position: absolute;
  top: 7.52%;
  left: calc(50% + 6.17px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80.305%;
  transform: translateX(-50%);
}

.banner-lead {
  width: 70%;
  margin: 0 0 22px;
  text-align: center;
}

.banner-logo {
  display: block;
  width: 100%;
}

.banner-cans {
  position: absolute;
  z-index: 4;
  left: calc(50% + 2.5px);
  top: 38.9436%;
  width: 107.2917%;
  aspect-ratio: 1545 / 752;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}

.banner-cans img {
  position: absolute;
  left: -0.01%;
  top: -14.75%;
  width: 100.03%;
  height: 114.75%;
  max-width: none;
}

.banner-spark {
  position: absolute;
  left: 28.4028%;
  top: 38.4064%;
  z-index: 3;
  width: 7.2222%;
  mix-blend-mode: screen;
  transform: scaleX(-1);
  pointer-events: none;
}

@media (max-width: 860px) {
  .banner .banner-wash {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .banner .banner-wash-overlay {
    height: 62%;
  }

  .banner .banner-flares {
    display: none;
  }

  .banner .banner-copy {
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    padding: 30px;
    transform: none;
  }

  .banner .banner-lead {
    width: 100%;
    max-width: 100%;
    margin: 0 0 6px;
    font-size: clamp(17px, 4.4vw, 28px);
    text-wrap: balance;
  }

  .banner .banner-logo {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
  }

  .banner .banner-frame {
    aspect-ratio: 1 / 1;
  }

  .banner .banner-sky {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .banner .banner-sky img {
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }

  .banner .banner-cans {
    top: auto;
    bottom: -6%;
  }

  .banner .banner-spark {
    z-index: 3;
  }
}