.bento .content-wrapper {
    max-width: 80ch;
    margin-inline: auto;
}

/* Base Bento Grid (Desktop: 5 Columns) */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: minmax(min-content, max-content);
    grid-auto-flow: dense;
    gap: clamp(1.25rem, 3vw, 2rem);
}

/* Tablet / Mobile Landscape (< 900px): 2 Equal Columns */
@media (max-width: 899px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Reset ALL cards so inline PHP spans can't force overflow */
    .bento-grid>.bento-card {
        grid-column: span 1 !important;
        grid-row: auto !important;
    }

    /* Cards configured as span 3 or higher on desktop take full width (2 cols) on tablet */
    .bento-grid>.bento-card[style*="grid-column: span 3"],
    .bento-grid>.bento-card[style*="grid-column: span 4"],
    .bento-grid>.bento-card[style*="grid-column: span 5"] {
        grid-column: 1 / -1 !important;
    }
}

/* Mobile Portrait (< 600px): Single Column */
@media (max-width: 599px) {
    .bento-grid {
        grid-template-columns: 1fr !important;
    }

    /* Force every card to stretch across the full width of the 1-column grid */
    .bento-grid>.bento-card {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
}

/* Card Styling */
.bento-grid .bento-card svg {
    width: 3rem;
    height: 3rem;
}

.bento-grid .bento-card svg path {
    fill: var(--colour-mi-brown);
}

.bento-grid .bento-card p:last-child {
    margin-bottom: 0;
}

.bento-grid .bento-card.bg-yellow {
    color: var(--colour-mi-brown);
}

.bento-grid .bento-card.bg-black {
    color: var(--colour-mi-white);
}

.bento-grid .bento-card.bg-black svg path {
    fill: var(--colour-mi-white);
}

.bento-grid .bento-card.bg-white svg path {
    fill: var(--colour-mi-brown);
}