.kp-pattern {
  position: relative;
  overflow: hidden;
  --kp-pattern-url: none;
  --kp-pattern-size: 120px;
  --kp-size: 20%;
  --kp-opacity: 0.12;
  --kp-color: rgba(15, 23, 42, 0.12);
  --kp-blend: normal;
}

html.dark .kp-pattern {
  --kp-color: rgba(148, 163, 184, 0.18);
  --kp-opacity: 0.18;
}

.kp-pattern::before {
  content: "";
  position: absolute;
  background-image: var(--kp-pattern-url);
  background-repeat: repeat;
  background-size: var(--kp-pattern-size);
  opacity: var(--kp-opacity);
  mix-blend-mode: var(--kp-blend);
  pointer-events: none;
  z-index: 0;
}

@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .kp-pattern::before {
    background-image: none;
    background-color: var(--kp-color);
    -webkit-mask-image: var(--kp-pattern-url);
    mask-image: var(--kp-pattern-url);
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: var(--kp-pattern-size);
    mask-size: var(--kp-pattern-size);
  }
}

.kp-pattern > * {
  position: relative;
  z-index: 1;
}

.kp-from-bottom::before {
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--kp-size);
}

.kp-from-top::before {
  left: 0;
  right: 0;
  top: 0;
  height: var(--kp-size);
}

.kp-from-left::before {
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--kp-size);
}

.kp-from-right::before {
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--kp-size);
}