/* 1. Main Container */
[data-element-id="elm_8YooWv0KfjBKQ0zgLG1bFA"] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    /* We use a negative margin on the row to counteract the outer margins of the columns */
    margin-left: -10px;
    margin-right: -10px;
}

/* 2. Column Styling with 10px Left/Right Margin */
[data-element-id="elm_8YooWv0KfjBKQ0zgLG1bFA"] .zpelem-col {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    
    /* The 10px margin you requested */
    margin: 10px 10px !important; 

    /* Responsive Widths (Adjusted to account for margins) */
    flex: 1 1 100% !important; /* Mobile */
}

/* Tablet (2 columns) */
@media (min-width: 768px) {
    [data-element-id="elm_8YooWv0KfjBKQ0zgLG1bFA"] .zpelem-col {
        flex: 0 1 calc(50% - 20px) !important; /* 50% minus the 20px total horizontal margin */
    }
}

/* Desktop (3 columns) */
@media (min-width: 1024px) {
    [data-element-id="elm_8YooWv0KfjBKQ0zgLG1bFA"] .zpelem-col {
        flex: 0 1 calc(33.333% - 20px) !important; /* 33% minus the 20px total horizontal margin */
        max-width: 350px !important;
    }
}

/* 3. Ensure Button stays at the bottom */
[data-element-id="elm_8YooWv0KfjBKQ0zgLG1bFA"] .zpelem-button {
    margin-top: auto !important;
    padding-top: 20px !important;
}