Skip to main content

force 4 column teasers on tiles instead of cards 

/* Keep CTA comfortably inside the teaser on wide screens */
.amplify-section-container.amplify-teasers.tiles
.card-teaser-container .content {
  padding-bottom: 20px !important;
}
/* Keep stretched-link CTA visually inside the card */
.amplify-section-container.amplify-teasers.tiles
.card-teaser-container .content {
  padding-bottom: 3rem !important; /* main fix */
}
/* Make each tile card a column so content can sit at the bottom reliably */
.amplify-section-container.amplify-teasers.tiles
article.card-teaser-container {
  display: flex !important;
  flex-direction: column !important;
}

/* Override the percent-based drop and pin content to the bottom */
.amplify-section-container.amplify-teasers.tiles
article.card-teaser-container > .content {
  margin-top: auto !important;     /* replaces margin-top: 76% behavior */
  flex-basis: auto !important;     /* neutralizes flex-basis: 50% */
  padding-bottom: 2.5rem !important; /* your “keep it in” padding */
}

/* Optional: give the CTA itself a touch more breathing room */
.amplify-section-container.amplify-teasers.tiles
article.card-teaser-container > .content > .cta {
  padding-top: 0.75rem !important;
}
 

/* --- TILES teasers: make the CARD WRAPPER a 4-col grid --- */
.amplify-section-container.amplify-teasers.tiles {
  /* keeps section from “centering” a skinny inner element */
  justify-content: stretch !important;
  align-items: stretch !important;
}

/* ensure the outer container isn't narrowing the layout */
.amplify-section-container.amplify-teasers.tiles > .container {
  width: 100% !important;
  max-width: none !important;
}

/* THIS is the actual parent of the article cards */
.amplify-section-container.amplify-teasers.tiles .teaser-container.amplify-target-locator {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 2rem !important;
  width: 100% !important;
}

/* cards should fill their grid cell (and not keep old flex sizing) */
.amplify-section-container.amplify-teasers.tiles .teaser-container.amplify-target-locator > article.card-teaser-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .amplify-section-container.amplify-teasers.tiles .teaser-container.amplify-target-locator {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .amplify-section-container.amplify-teasers.tiles .teaser-container.amplify-target-locator {
    grid-template-columns: 1fr !important;
  }
}
/* Add comfortable horizontal padding to tiles teaser section */
.amplify-section-container.amplify-teasers.tiles {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .amplify-section-container.amplify-teasers.tiles {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .amplify-section-container.amplify-teasers.tiles {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}