:root {
  --boundary-fade-top: linear-gradient(
    180deg,
    rgba(var(--rgb-theme), 1) 0%,
    rgba(var(--rgb-theme), 0.9) 14%,
    rgba(var(--rgb-theme), 0.68) 36%,
    rgba(var(--rgb-theme), 0.4) 58%,
    rgba(var(--rgb-theme), 0.16) 80%,
    rgba(var(--rgb-theme), 0) 100%
  );
  --boundary-fade-bottom: linear-gradient(
    0deg,
    rgba(var(--rgb-theme), 1) 0%,
    rgba(var(--rgb-theme), 0.9) 14%,
    rgba(var(--rgb-theme), 0.68) 36%,
    rgba(var(--rgb-theme), 0.4) 58%,
    rgba(var(--rgb-theme), 0.16) 80%,
    rgba(var(--rgb-theme), 0) 100%
  );
}

.boundary:after,
.boundary:before {
  content: '';
  height: 7.4em;
  left: 0;
  pointer-events: none;
  position: fixed;
  width: 100%;
  z-index: 101;
}

.boundary:after {
  background: var(--boundary-fade-top);
  top: 0;
}

.boundary:before {
  background: var(--boundary-fade-bottom);
  bottom: 0;
}



@media(min-width: 64em) and (hover: hover) and (pointer: fine) {

  .boundary:after {
    height: max(22.2vh, 5.4em);
  }

  .boundary:before {
    height: 44.4vh;
  }

}