<template>
  <div class="edge-fade" />
</template>

<style scoped>
.edge-fade {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.edge-fade::before,
.edge-fade::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.edge-fade::before {
  top: 0;
  height: 25%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
}

.edge-fade::after {
  bottom: 0;
  height: 25%;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
}
</style>
