.rainbow-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rainbow-rays__side {
  position: absolute;
  inset-block: 0;
  bottom: 0;
  width: 40%;
  clip-path: polygon(0 0%, 0% 100%, 100% 100%);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.24) 24%,
    rgba(0, 0, 0, 1) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.24) 24%,
    rgba(0, 0, 0, 1) 100%
  );
}

.rainbow-rays__side--left {
  left: 0;
}

.rainbow-rays__side--right {
  right: 0;
  transform: scaleX(-1);
  transform-origin: center;
}

.rainbow-rays__stripe {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}

.rainbow-rays__stripe--green {
  background: linear-gradient(
    to left,
    transparent 0%,
    rgba(126, 212, 158, 0.74) 24%,
    rgba(126, 212, 158, 0.74) 50%,
    rgba(126, 212, 158, 0.5) 100%
  );
  clip-path: polygon(0 79%, 55% 100%, 51% 100%, 0 100%);
}

.rainbow-rays__stripe--blue {
  background: linear-gradient(
    to left,
    transparent 0%,
    rgba(218, 244, 252, 0.1) 24%,
    rgba(173, 216, 230, 0.74) 50%,
    rgba(173, 216, 230, 0.5) 100%
  );
  clip-path: polygon(0 62%, 69% 100%, 55% 100%, 0 79%);
}

.rainbow-rays__stripe--pink {
  background: linear-gradient(
    to left,
    transparent 0%,
    rgba(245, 222, 226, 0.1) 20%,
    rgba(255, 182, 193, 1) 60%,
    rgba(255, 182, 193, 0.5) 100%
  );
  clip-path: polygon(0 45%, 80% 100%, 69% 100%, 0 62%);
}

.rainbow-rays__stripe--yellow {
  background: linear-gradient(
    to left,
    transparent 0%,
    rgba(247, 246, 232, 0.1) 10%,
    rgb(249, 197, 93) 50%,
    rgba(249, 223, 93, 0.5) 100%
  );
  clip-path: polygon(0 20%, 90% 100%, 80% 100%, 0 45%);
}