/* Base */

.gradient-up {
  position: relative;
  background: var(--gradient-color);
  padding-top: var(--gradient-height);
}

.gradient-down {
  position: relative;
  background: var(--gradient-color);
  padding-bottom: var(--gradient-height);
}

/* Keep content above */
.gradient-up > *,
.gradient-down > * {
  position: relative;
  z-index: 2;
}

/* Shared pseudo setup */
.gradient-up::before,
.gradient-down::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--gradient-height, 160px);
  pointer-events: none;
  z-index: 1;
}

/* LOWER fade (for gradient-down) */
.gradient-down::after {
  bottom: var(--gradient-offset);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 0%,
    var(--gradient-color, rgba(0, 0, 0, 1)) 100%
  );
}

/* UPPER fade (for gradient-up) */
.gradient-up::before {
  top: var(--gradient-offset);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    var(--gradient-color, rgba(0, 0, 0, 1)) 100%
  );
}