/* add the class "core-values-text" to the column that wraps the three text blocks */
.core-values-text {
  position: relative;
  background-color: transparent; /* fallback */
  overflow: visible;
}

/* keep your content above the column base but below the overlay?  
   we want content to be visible and then the overlay to sit above it */
.core-values-text > * {
  position: relative;
  z-index: 1;
}

/* overlays that create the top and bottom fades */
.core-values-text::before,
.core-values-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 18%;               /* adjust how much fade you want */
  pointer-events: none;      /* don't block clicks/selection */
  z-index: 2;                /* above content to dim it */
}

/* top fade (solid → transparent downward) */
.core-values-text::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 170%);
}

/* bottom fade (solid → transparent upward) */
.core-values-text::after {
  bottom: 0;
  background: linear-gradient(to top,    rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 170%);
}