/* Portfolio card grid.
   The card's own look (surface, radius, typography) lives with the template that
   renders it, in views/portfolio_templates.xml. This file only holds the layout
   rules that have to survive in the frontend bundle.
   NB the fixed 200px image height and the centred title that used to live here
   fought the template's own rules - the bundle loads after the page's <style>,
   so whichever won depended on load order rather than intent. */

.portfolio-x-item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.portfolio-x-card {
    height: 100%; /* Ensures the cards are uniform in height */
    overflow: hidden;
}

.portfolio-x-card-img-top {
    width: 100%; /* Make the image span the card width */
    object-fit: cover; /* Crop the image to fit without distortion */
}