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

.progressiveBlur > div,
.progressiveBlur::before,
.progressiveBlur::after {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}

.progressiveBlur::before {
  content: "";
  z-index: 1;
  backdrop-filter: blur(16px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 0) 40%
  );
}

.progressiveBlur > div:nth-of-type(1) {
  z-index: 2;
  backdrop-filter: blur(8px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 0) 60%
  );
}

.progressiveBlur > div:nth-of-type(2) {
  z-index: 3;
  backdrop-filter: blur(4px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 60%,
    rgba(0, 0, 0, 0) 80%
  );
}

.progressiveBlur > div:nth-of-type(3) {
  z-index: 4;
  backdrop-filter: blur(2px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* .progressiveBlur::after {
  content: "";
  z-index: 5;
  backdrop-filter: blur(2px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 1) 60%,
    rgba(0, 0, 0, 1) 100%
  );
} */
