Podcasts page disables the card's content padding and stacks two cards per column, so the card content touches the next card

Problem/Motivation

On /podcasts, each podcast card's bottom line (the episode count and the View Show button) sits flush against the card's bottom edge and runs straight into the image of the card below it. The metadata row reads as a caption for the wrong image. Seen at 1440px, confirmed in a browser on 1 October 2026.

• "48 Episodes" bottom edge 596px, "View Show" bottom edge 598px, card bottom edge 598px. Space below the button: 0px.
• The two cards in each column have a measured vertical gap of 0px.

Two settings in the shipped Canvas page content/canvas_page/08-podcasts.yml cause it. Both are content configuration. Neither is a theme bug and no CSS change is needed.

1. The card's content padding is switched off. podcast-card declares content_padding with a default of true, and podcast-card.twig uses it as:

{% set body_classes = ['podcast-card__body']|merge(content_padding ? ['p-4'] : []) %}

So the default gives the card body p-4 (1.5rem on all sides). The Podcasts page sets content_padding: false on all six cards, so the body has no padding at all and its last line touches the card's bottom edge.

2. Two cards share each column. The card section (uuid a6923ed9) is columns: 33-33-33 with gutter: gx-4 gy-4, and the six cards are placed two per slot:

col_1 -> 4ee2db26, abb58a5b
col_2 -> 6747f86e, 5734d7ca
col_3 -> efeafbc4, 75676d6b

Bootstrap's gy-* spaces columns within a row. With three columns side by side that never wrap, the second card in each slot is simply the next element inside the same column, so no grid gutter can reach it. gx-4 works correctly, the horizontal gutter measures 24px, because that is what it is for.

The two compound: the zero-padding card edge lands flush against the next card's image.

Ruled out already, so nobody re-investigates them:

• The section spacing props are correct. Both sections carry padding_block_start: pt-5 and padding_block_end: pb-5, verified in the shipped file and on the live site, and the rendered section computes to 48px top and bottom padding.
• margin: 0 !important on .podcast-card__button in the theme is correct as written. atoms/button adds me-3 mb-3 only for inline wrapping; this card has a single button inside a justify-content-between flex row, where a right margin would push it out of alignment. It must not be removed.

Steps to reproduce

1. Install The Rightup site template on Varbase 11.
2. Open /podcasts at 1440px wide.
3. Look at the bottom of any card in the top row. The episode count and the View Show button touch the card edge, and the card below starts with no gap.

Proposed resolution

Both changes are in content/canvas_page/08-podcasts.yml:

1. Set content_padding: true on the six podcast cards, or remove the input so the component default applies.
2. Lay the cards out as two rows of three rather than two per column, which is what the design shows. The natural Canvas shape is a second 33-33-33 section holding the second three cards, so each section's existing padding_block_* provides the row gap and gy-4 keeps working inside each. A spacer component between the stacked cards is the lighter alternative.

Acceptance is behavioural, not numeric: the page is right when the cards no longer touch and each card's content is clearly inside its own card. Do not chase pixel-exact matches to the design, its 80px and 32px have no exact Bootstrap spacer step and are not meant to.

Use only Bootstrap 5.3 utilities already exposed through Canvas. No CSS, no new utility class, no component change.

Worth checking in the same pass, but the two patterns do not spread the same way across the other 16 Canvas pages:

• content_padding: false is confined to the two podcast pages. The only other page carrying it is 09-podcasts-last-call.yml (3 cards), so check that one too.
• Stacked cards in one column slot are widespread (9 of the 17 pages, up to 10 cards in a single slot) and a vertical list is a perfectly normal layout, so this is not a defect in general. It is a defect here because the Podcasts design is a 3x2 grid of six cards and the implementation is three columns of two. Compare the other pages against their own design frames rather than assuming they are wrong.

Remaining tasks

• ✅ File an issue
• ❌ Addition/Change/Update/Fix
• ❌ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support
• ➖ User Guide Documentation support
• ❌ UX/UI designer responsibilities
• ➖ Accessibility and Readability
• ❌ Reviewed by a human
• ❌ Code review by maintainers
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ❌ Update Release Notes
• ❌ Release

User interface changes

• The Podcasts page shows six cards as two rows of three, each card's content inside its own padded card.

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• Fixed the Podcasts page: podcast cards had their content padding switched off and were stacked two per column, so a card's content touched the next card.