/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 07 2025 | 04:42:03 */
/* =================================================================== */
/* 1. Make all listing cards a uniform height
/* =================================================================== */

/* This turns the column into a flex container, which allows the child
   (the .lp-listing card) to grow and fill the available vertical space. */
.listingcampaings .loop-grid-clearfix {
    display: flex;
    flex-direction: column;
}

/* This makes the listing card itself a flex container and allows it to grow. */
.listingcampaings .lp-listing {
    flex-grow: 1; /* This is the key property that makes the card stretch */
    display: flex;
    flex-direction: column;
}

/* This targets the main content area of the card and makes it grow,
   which cleverly pushes the footer (buttons, etc.) to the very bottom,
   ensuring they align perfectly across all cards in the same row. */
.listingcampaings .lp-listing .lp-listing-bottom {
    flex-grow: 1;
}


/* =================================================================== */
/* 2. Center listing cards in mobile view
/* =================================================================== */

/* This media query applies the styles only to screens smaller than 768px (most tablets and phones). */
@media (max-width: 767px) {
    .listingcampaings .loop-grid-clearfix {
        /* Override the theme's default full-width for columns on mobile.
           90% is a good starting point, but you can change it. */
        width: 90% !important;
        
        /* This is a classic trick to center a block-level element horizontally. */
        margin-left: auto !important;
        margin-right: auto !important;

        /* Disable any floating behavior to prevent alignment issues. */
        float: none !important;
    }
}