.progressive-blur_wrap {
  --header-bg-color: var(--main-color);
  z-index: 10;
  pointer-events: none;
  position: absolute;
  overflow: clip;
}

.progressive-blur_wrap.is-dark {
  --header-bg-color: var(--text-color);
}

.progressive-blur_gradient {
  z-index: -10;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
}

.progressive-blur_gradient.is-1 {
  opacity: .9;
  background-image: linear-gradient(var(--blur-dir, to bottom), var(--header-bg-color) 0%, transparent 25%);
}

.progressive-blur_gradient.is-2 {
  opacity: .2;
  background-image: linear-gradient(var(--blur-dir, to bottom), var(--header-bg-color) 0%, transparent 75%);
}

.progressive-blur_gradient.is-3 {
  opacity: .3;
  background-image: linear-gradient(var(--blur-dir, to bottom), var(--header-bg-color) 0%, transparent 95%);
}

.progressive-blur_panel {
  -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
  -webkit-mask: linear-gradient(var(--blur-dir, to bottom), #0000 10%, #000 20% 40%, #0000 50%);
  mask: linear-gradient(var(--blur-dir, to bottom), #0000 10%, #000 20% 40%, #0000 50%);
}


.progressive-blur_panel.is-1 {
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  -webkit-mask: linear-gradient(var(--blur-dir, to bottom), #000 0% 10%, #0000 30%);
  mask: linear-gradient(var(--blur-dir, to bottom), #000 0% 10%, #0000 30%);
}
.progressive-blur_panel.is-2 {
  -webkit-backdrop-filter: blur(calc(var(--blur) / var(--ratio)));
  backdrop-filter: blur(calc(var(--blur) / var(--ratio)));
  -webkit-mask: linear-gradient(var(--blur-dir, to bottom), #0000 0%, #000 10% 20%, #0000 40%);
  mask: linear-gradient(var(--blur-dir, to bottom), #0000 0%, #000 10% 20%, #0000 40%);
}

.progressive-blur_panel.is-3 {
  -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio))));
  backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio))));
  -webkit-mask: linear-gradient(var(--blur-dir, to bottom), #0000 0%, #000 20% 30%, #0000 50%);
  mask: linear-gradient(var(--blur-dir, to bottom), #0000 0%, #000 20% 30%, #0000 50%);
}

.progressive-blur_panel.is-4 {
  -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio))));
  backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio))));
  -webkit-mask: linear-gradient(var(--blur-dir, to bottom), #0000 10%, #000 30% 40%, #0000 60%);
  mask: linear-gradient(var(--blur-dir, to bottom), #0000 10%, #000 30% 40%, #0000 60%);
}

.progressive-blur_panel.is-5 {
  -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  -webkit-mask: linear-gradient(var(--blur-dir, to bottom), #0000 20%, #000 40% 50%, #0000 70%);
  mask: linear-gradient(var(--blur-dir, to bottom), #0000 20%, #000 40% 50%, #0000 70%);
}

.progressive-blur_panel.is-6 {
  -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  -webkit-mask: linear-gradient(var(--blur-dir, to bottom), #0000 30%, #000 50% 60%, #0000 80%);
  mask: linear-gradient(var(--blur-dir, to bottom), #0000 30%, #000 50% 60%, #0000 80%);
}

.progressive-blur_panel.is-7 {
  -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  -webkit-mask: linear-gradient(var(--blur-dir, to bottom), #0000 40%, #000 60% 70%, #0000 90%);
  mask: linear-gradient(var(--blur-dir, to bottom), #0000 40%, #000 60% 70%, #0000 90%);
}

.progressive-blur_panel.is-8 {
  -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  -webkit-mask: linear-gradient(var(--blur-dir, to bottom), #0000 50%, #000 70% 80%, #0000 100%);
  mask: linear-gradient(var(--blur-dir, to bottom), #0000 50%, #000 70% 80%, #0000 100%);
}

.progressive-blur_panel.is-9 {
  -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  -webkit-mask: linear-gradient(var(--blur-dir, to bottom), #0000 60%, #000 80% 90%, #0000 100%);
  mask: linear-gradient(var(--blur-dir, to bottom), #0000 60%, #000 80% 90%, #0000 100%);
}

.progressive-blur_panel.is-10 {
  -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  -webkit-mask: linear-gradient(var(--blur-dir, to bottom), #0000 70%, #000 90%, #0000 100%);
  mask: linear-gradient(var(--blur-dir, to bottom), #0000 70%, #000 90%, #0000 100%);
}