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

.boundary:after {
  background: linear-gradient(
    180deg,
    oklch(var(--lch-white) / 1) 0,
    oklch(var(--lch-white) / 0) 100%
  );
  top: 0;
  view-transition-name: boundary-top;
}

.boundary:before {
  background: linear-gradient(
    0deg,
    oklch(var(--lch-white) / 1) 0,
    oklch(var(--lch-white) / 0) 100%
  );
  bottom: 0;
  view-transition-name: boundary-bottom;
}

::view-transition-group(boundary-top) {
  z-index: 101;
}

::view-transition-group(boundary-bottom) {
  z-index: 101;
}

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

  .boundary:after {
    /* height: max(22.2vh, 5.4em); */
    height: var(--block-space-quad);
  }

  .boundary:before {
    /* height: 44.4vh; */
    height: var(--block-space-quad);
  }

}