/*

    1. Inside the parent container, add the main class with the amount of columns (.ion-columns.four-columns)
    2. On the parent contain, inside 'Advanced > Custom CSS' add the following to the CSS box and adjust to your need (Note: You must include the selector tag)

    selector {
        --ion-gap: {{{ OVERRIDE GAP VALUE IF NECESSARY, USE CLAMP }}};
        --ion-justify: {{{ OVERRIDE CENTER IF NECESSARY }}}
    }

    3. Add the container class (.ion-column) to each of the direct child elements
    4. Profit ???

*/

.ion-columns {
    --ion-gap: clamp(20px, 1.5625vw, 30px);
    --ion-justify: center;
}

.ion-columns, .ion-columns > .e-con-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--ion-gap) !important;
    justify-content: var(--ion-justify) !important;
    flex-direction: unset !important;
}

.ion-columns .ion-column {
    margin: 0 !important;
}

.ion-columns.six-columns .ion-column {
    width: calc(16.66% - (var(--ion-gap) * 0.833)) !important;
}

.ion-columns.five-columns .ion-column {
    width: calc(20% - (var(--ion-gap) * 0.8)) !important;
}

.ion-columns.four-columns .ion-column {
    width: calc(25% - (var(--ion-gap) * 0.75)) !important;
}

.ion-columns.three-columns .ion-column {
    width: calc(33.33% - (var(--ion-gap) * 0.666)) !important;
}

.ion-columns.two-columns .ion-column {
    width: calc(50% - (var(--ion-gap) * 0.5)) !important;
}

@media (max-width: 1024px) {
    .ion-columns.six-columns .ion-column,
    .ion-columns.five-columns .ion-column {
        width: calc(33.33% - (var(--ion-gap) * 0.666)) !important;
    }
}

@media (max-width: 991px) {
    .ion-columns.four-columns .ion-column {
        width: calc(50% - (var(--ion-gap) * 0.5)) !important;
    }
}

@media (max-width: 767px) {
    .ion-columns.six-columns .ion-column,
    .ion-columns.five-columns .ion-column {
        width: calc(50% - (var(--ion-gap) * 0.5)) !important;
    }
    .ion-columns.three-columns .ion-column {
        width: 100% !important;
    }
}

@media (max-width: 500px) {
    .ion-columns.six-columns .ion-column,
    .ion-columns.five-columns .ion-column,
    .ion-columns.four-columns .ion-column,
    .ion-columns.two-columns .ion-column {
        width: 100% !important;
    }
}