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;
}
}