Light the Stream

In Action here: https://ssschlibrary.specialdistrict.org/
 

paragraph summaries have not been altered, and may be cut off. If needed to adjust, adding a max-width of 260px will likely do the trick. 
 

Add to Preferences > Advanced > Site-wide custom HTML before </head>

<style>
/* === Responsive Grid Layout for Teasers === */

/* Base: 4 columns on desktop */
.amplify-teasers.standard .standard-teasers-container.three_column {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2rem !important;
  width: 100%;
  box-sizing: border-box;
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
  .amplify-teasers.standard .standard-teasers-container.three_column {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
  .amplify-teasers.standard .standard-teasers-container.three_column {
    grid-template-columns: 1fr !important;
    padding: 0 1rem;
  }
}

/* Each teaser fills the grid cell */
.amplify-teasers.standard .standard-teasers-container.three_column > article {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
}

/* Inner containers stretch */
.standard-teaser-container {
  width: 100% !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.standard-teaser-image-container,
.standard-teaser-content-container {
  width: 100% !important;
}

/* Max specificity for teaser title fix */
.amplify-teasers.standard .standard-container .standard-teasers-container .standard-teaser-container .standard-teaser-content-container a.standard-teaser-link > p.heading {
  all: unset;
  display: block !important;
  font-size: 1.1rem !important;
  font-weight: bold !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  margin-bottom: 0.5rem !important;
  color: inherit !important;
max-width: 260px
}
</style>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const headings = document.querySelectorAll(
      ".amplify-teasers.standard .standard-container .standard-teasers-container .standard-teaser-container .standard-teaser-content-container a.standard-teaser-link > p.heading"
    );
    headings.forEach((el) => {
      el.style.whiteSpace = "normal";
      el.style.overflow = "visible";
      el.style.textOverflow = "unset";
      el.style.display = "block";
      el.style.webkitLineClamp = "unset";
      el.style.webkitBoxOrient = "unset";
    });
  });
</script>