@charset "UTF-8";
/**
 *  @package mariart
 *
 *  This class sets up our grid layout styles for the Mariart system.
 *
 *  Grid layout breakoints:
 *      xs      < 576px
 *      s       >= 576px
 *      m       >= 768px
 *      l       >= 992px
 *      xl      >= 1200px
 *      xxl     >= 1450px
 */

/*  ********************************************************************************  **

    CSS variables

**  ********************************************************************************  */

:root {
    
    /*  **********  Padding  **********  */
    
    --mariart-grid-row-padding: 30px;
    --mariart-grid-cell-padding: 20px;
    
    
    
    
    /*  **********  Cell Widths  **********  */
    
    --mariart-grid-cell-1: calc((100% - (var(--mariart-grid-row-padding) * 11)) / 12);
    --mariart-grid-cell-2: calc(((100% - (var(--mariart-grid-row-padding) * 11)) / 12 * 2) + (var(--mariart-grid-row-padding) * 1));
    --mariart-grid-cell-3: calc(((100% - (var(--mariart-grid-row-padding) * 11)) / 12 * 3) + (var(--mariart-grid-row-padding) * 2));
    --mariart-grid-cell-4: calc(((100% - (var(--mariart-grid-row-padding) * 11)) / 12 * 4) + (var(--mariart-grid-row-padding) * 3));
    --mariart-grid-cell-5: calc(((100% - (var(--mariart-grid-row-padding) * 11)) / 12 * 5) + (var(--mariart-grid-row-padding) * 4));
    --mariart-grid-cell-6: calc(((100% - (var(--mariart-grid-row-padding) * 11)) / 12 * 6) + (var(--mariart-grid-row-padding) * 5));
    --mariart-grid-cell-7: calc(((100% - (var(--mariart-grid-row-padding) * 11)) / 12 * 7) + (var(--mariart-grid-row-padding) * 6));
    --mariart-grid-cell-8: calc(((100% - (var(--mariart-grid-row-padding) * 11)) / 12 * 8) + (var(--mariart-grid-row-padding) * 7));
    --mariart-grid-cell-9: calc(((100% - (var(--mariart-grid-row-padding) * 11)) / 12 * 9) + (var(--mariart-grid-row-padding) * 8));
    --mariart-grid-cell-10: calc(((100% - (var(--mariart-grid-row-padding) * 11)) / 12 * 10) + (var(--mariart-grid-row-padding) * 9));
    --mariart-grid-cell-11: calc(((100% - (var(--mariart-grid-row-padding) * 11)) / 12 * 11) + (var(--mariart-grid-row-padding) * 10));
    
    --mariart-grid-cell-nogap-1: calc((100% /12) * 1);
    --mariart-grid-cell-nogap-2: calc((100% /12) * 2);
    --mariart-grid-cell-nogap-3: calc((100% /12) * 3);
    --mariart-grid-cell-nogap-4: calc((100% /12) * 4);
    --mariart-grid-cell-nogap-5: calc((100% /12) * 5);
    --mariart-grid-cell-nogap-6: calc((100% /12) * 6);
    --mariart-grid-cell-nogap-7: calc((100% /12) * 7);
    --mariart-grid-cell-nogap-8: calc((100% /12) * 8);
    --mariart-grid-cell-nogap-9: calc((100% /12) * 9);
    --mariart-grid-cell-nogap-10: calc((100% /12) * 10);
    --mariart-grid-cell-nogap-11: calc((100% /12) * 11);
    
}




/*  ********************************************************************************  **

    Rows

**  ********************************************************************************  */

.mariart-grid-row,
.wp-block-columns.mariart-grid-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--mariart-grid-row-padding);
    flex-wrap: wrap !important;
}
.mariart-grid-row.align-center {
    justify-content: center;
}
.mariart-grid-row.align-right {
    justify-content: flex-end;
}

.mariart-grid-row.valign-center {
    align-items: center;
}
.mariart-grid-row.valign-bottom {
    align-items: flex-end;
}




/*  **********  No gap  **********  */

.mariart-grid-row.no-gap {
    gap: 0;
}




/*  ********************************************************************************  **

    Cells

**  ********************************************************************************  */

.wp-block-columns.mariart-grid-row > .wp-block-column.mariart-grid-cell,
.wp-block-columns.mariart-grid-row:not(.is-not-stacked-on-mobile) > .wp-block-column.mariart-grid-cell {
    flex-basis: unset !important;
    flex-grow: unset !important;
}

.mariart-grid-cell {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.mariart-grid-cell.padded {
    padding: var(--mariart-grid-cell-padding);
}




/*  ********************************************************************************  **

    X Small

**  ********************************************************************************  */

.mariart-grid-cell.mariart-grid-cell-xs-1 {
    width: var(--mariart-grid-cell-1);
}
.mariart-grid-cell.mariart-grid-cell-xs-2 {
    width: var(--mariart-grid-cell-2);
}
.mariart-grid-cell.mariart-grid-cell-xs-3 {
    width: var(--mariart-grid-cell-3);
}
.mariart-grid-cell.mariart-grid-cell-xs-4 {
    width: var(--mariart-grid-cell-4);
}
.mariart-grid-cell.mariart-grid-cell-xs-5 {
    width: var(--mariart-grid-cell-5);
}
.mariart-grid-cell.mariart-grid-cell-xs-6 {
    width: var(--mariart-grid-cell-6);
}
.mariart-grid-cell.mariart-grid-cell-xs-7 {
    width: var(--mariart-grid-cell-7);
}
.mariart-grid-cell.mariart-grid-cell-xs-8 {
    width: var(--mariart-grid-cell-8);
}
.mariart-grid-cell.mariart-grid-cell-xs-9 {
    width: var(--mariart-grid-cell-9);
}
.mariart-grid-cell.mariart-grid-cell-xs-10 {
    width: var(--mariart-grid-cell-10);
}
.mariart-grid-cell.mariart-grid-cell-xs-11 {
    width: var(--mariart-grid-cell-11);
}




/*  **********  No gap  *********  */

.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xs-1 {
    width: var(--mariart-grid-cell-nogap-1);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xs-2 {
    width: var(--mariart-grid-cell-nogap-2);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xs-3 {
    width: var(--mariart-grid-cell-nogap-3);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xs-4 {
    width: var(--mariart-grid-cell-nogap-4);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xs-5 {
    width: var(--mariart-grid-cell-nogap-5);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xs-6 {
    width: var(--mariart-grid-cell-nogap-6);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xs-7 {
    width: var(--mariart-grid-cell-nogap-7);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xs-8 {
    width: var(--mariart-grid-cell-nogap-8);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xs-9 {
    width: var(--mariart-grid-cell-nogap-9);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xs-10 {
    width: var(--mariart-grid-cell-nogap-10);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xs-11 {
    width: var(--mariart-grid-cell-nogap-11);
}




/*  **********  Cell gap spaces  **********  */

.mariart-grid-cell.mariart-grid-space-xs-1 {
    margin-left: calc(var(--mariart-grid-cell-1) + var(--mariart-grid-row-padding));
}
.mariart-grid-cell.mariart-grid-space-xs-2 {
    margin-left: calc(var(--mariart-grid-cell-2) + var(--mariart-grid-row-padding));
}
.mariart-grid-cell.mariart-grid-space-xs-3 {
    margin-left: calc(var(--mariart-grid-cell-3) + var(--mariart-grid-row-padding));
}
.mariart-grid-cell.mariart-grid-space-xs-4 {
    margin-left: calc(var(--mariart-grid-cell-4) + var(--mariart-grid-row-padding));
}
.mariart-grid-cell.mariart-grid-space-xs-5 {
    margin-left: calc(var(--mariart-grid-cell-5) + var(--mariart-grid-row-padding));
}
.mariart-grid-cell.mariart-grid-space-xs-6 {
    margin-left: calc(var(--mariart-grid-cell-6) + var(--mariart-grid-row-padding));
}
.mariart-grid-cell.mariart-grid-space-xs-7 {
    margin-left: calc(var(--mariart-grid-cell-7) + var(--mariart-grid-row-padding));
}
.mariart-grid-cell.mariart-grid-space-xs-8 {
    margin-left: calc(var(--mariart-grid-cell-8) + var(--mariart-grid-row-padding));
}
.mariart-grid-cell.mariart-grid-space-xs-9 {
    margin-left: calc(var(--mariart-grid-cell-9) + var(--mariart-grid-row-padding));
}
.mariart-grid-cell.mariart-grid-space-xs-10 {
    margin-left: calc(var(--mariart-grid-cell-10) + var(--mariart-grid-row-padding));
}
.mariart-grid-cell.mariart-grid-space-xs-11 {
    margin-left: calc(var(--mariart-grid-cell-11) + var(--mariart-grid-row-padding));
}

.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xs-1 {
    margin-left: var(--mariart-grid-cell-nogap-1);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xs-2 {
    margin-left: var(--mariart-grid-cell-nogap-2);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xs-3 {
    margin-left: var(--mariart-grid-cell-nogap-3);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xs-4 {
    margin-left: var(--mariart-grid-cell-nogap-4);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xs-5 {
    margin-left: var(--mariart-grid-cell-nogap-5);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xs-6 {
    margin-left: var(--mariart-grid-cell-nogap-6);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xs-7 {
    margin-left: var(--mariart-grid-cell-nogap-7);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xs-8 {
    margin-left: var(--mariart-grid-cell-nogap-8);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xs-9 {
    margin-left: var(--mariart-grid-cell-nogap-9);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xs-10 {
    margin-left: var(--mariart-grid-cell-nogap-10);
}
.mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xs-11 {
    margin-left: var(--mariart-grid-cell-nogap-11);
}




/*  ********************************************************************************  **

    Small

**  ********************************************************************************  */

@media screen and (min-width: 576px) {
    
    .mariart-grid-cell.mariart-grid-cell-s-1 {
        width: var(--mariart-grid-cell-1);
    }
    .mariart-grid-cell.mariart-grid-cell-s-2 {
        width: var(--mariart-grid-cell-2);
    }
    .mariart-grid-cell.mariart-grid-cell-s-3 {
        width: var(--mariart-grid-cell-3);
    }
    .mariart-grid-cell.mariart-grid-cell-s-4 {
        width: var(--mariart-grid-cell-4);
    }
    .mariart-grid-cell.mariart-grid-cell-s-5 {
        width: var(--mariart-grid-cell-5);
    }
    .mariart-grid-cell.mariart-grid-cell-s-6 {
        width: var(--mariart-grid-cell-6);
    }
    .mariart-grid-cell.mariart-grid-cell-s-7 {
        width: var(--mariart-grid-cell-7);
    }
    .mariart-grid-cell.mariart-grid-cell-s-8 {
        width: var(--mariart-grid-cell-8);
    }
    .mariart-grid-cell.mariart-grid-cell-s-9 {
        width: var(--mariart-grid-cell-9);
    }
    .mariart-grid-cell.mariart-grid-cell-s-10 {
        width: var(--mariart-grid-cell-10);
    }
    .mariart-grid-cell.mariart-grid-cell-s-11 {
        width: var(--mariart-grid-cell-11);
    }
    
    
    
    
    /*  **********  No gap  *********  */
    
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-s-1 {
        width: var(--mariart-grid-cell-nogap-1);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-s-2 {
        width: var(--mariart-grid-cell-nogap-2);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-s-3 {
        width: var(--mariart-grid-cell-nogap-3);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-s-4 {
        width: var(--mariart-grid-cell-nogap-4);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-s-5 {
        width: var(--mariart-grid-cell-nogap-5);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-s-6 {
        width: var(--mariart-grid-cell-nogap-6);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-s-7 {
        width: var(--mariart-grid-cell-nogap-7);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-s-8 {
        width: var(--mariart-grid-cell-nogap-8);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-s-9 {
        width: var(--mariart-grid-cell-nogap-9);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-s-10 {
        width: var(--mariart-grid-cell-nogap-10);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-s-11 {
        width: var(--mariart-grid-cell-nogap-11);
    }



    
    /*  **********  Cell gap spaces  **********  */
    
    .mariart-grid-cell.mariart-grid-space-s-1 {
        margin-left: calc(var(--mariart-grid-cell-1) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-s-2 {
        margin-left: calc(var(--mariart-grid-cell-2) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-s-3 {
        margin-left: calc(var(--mariart-grid-cell-3) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-s-4 {
        margin-left: calc(var(--mariart-grid-cell-4) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-s-5 {
        margin-left: calc(var(--mariart-grid-cell-5) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-s-6 {
        margin-left: calc(var(--mariart-grid-cell-6) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-s-7 {
        margin-left: calc(var(--mariart-grid-cell-7) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-s-8 {
        margin-left: calc(var(--mariart-grid-cell-8) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-s-9 {
        margin-left: calc(var(--mariart-grid-cell-9) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-s-10 {
        margin-left: calc(var(--mariart-grid-cell-10) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-s-11 {
        margin-left: calc(var(--mariart-grid-cell-11) + var(--mariart-grid-row-padding));
    }
    
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-s-1 {
        margin-left: var(--mariart-grid-cell-nogap-1);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-s-2 {
        margin-left: var(--mariart-grid-cell-nogap-2);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-s-3 {
        margin-left: var(--mariart-grid-cell-nogap-3);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-s-4 {
        margin-left: var(--mariart-grid-cell-nogap-4);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-s-5 {
        margin-left: var(--mariart-grid-cell-nogap-5);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-s-6 {
        margin-left: var(--mariart-grid-cell-nogap-6);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-s-7 {
        margin-left: var(--mariart-grid-cell-nogap-7);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-s-8 {
        margin-left: var(--mariart-grid-cell-nogap-8);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-s-9 {
        margin-left: var(--mariart-grid-cell-nogap-9) ;
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-s-10 {
        margin-left: var(--mariart-grid-cell-nogap-10);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-s-11 {
        margin-left: var(--mariart-grid-cell-nogap-11);
    }
    
}




/*  ********************************************************************************  **

    Medium

**  ********************************************************************************  */

@media screen and (min-width: 768px) {
    
    .mariart-grid-cell.mariart-grid-cell-m-1 {
        width: var(--mariart-grid-cell-1);
    }
    .mariart-grid-cell.mariart-grid-cell-m-2 {
        width: var(--mariart-grid-cell-2);
    }
    .mariart-grid-cell.mariart-grid-cell-m-3 {
        width: var(--mariart-grid-cell-3);
    }
    .mariart-grid-cell.mariart-grid-cell-m-4 {
        width: var(--mariart-grid-cell-4);
    }
    .mariart-grid-cell.mariart-grid-cell-m-5 {
        width: var(--mariart-grid-cell-5);
    }
    .mariart-grid-cell.mariart-grid-cell-m-6 {
        width: var(--mariart-grid-cell-6);
    }
    .mariart-grid-cell.mariart-grid-cell-m-7 {
        width: var(--mariart-grid-cell-7);
    }
    .mariart-grid-cell.mariart-grid-cell-m-8 {
        width: var(--mariart-grid-cell-8);
    }
    .mariart-grid-cell.mariart-grid-cell-m-9 {
        width: var(--mariart-grid-cell-9);
    }
    .mariart-grid-cell.mariart-grid-cell-m-10 {
        width: var(--mariart-grid-cell-10);
    }
    .mariart-grid-cell.mariart-grid-cell-m-11 {
        width: var(--mariart-grid-cell-11);
    }
    
    
    
    
    /*  **********  No gap  *********  */
    
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-m-1 {
        width: var(--mariart-grid-cell-nogap-1);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-m-2 {
        width: var(--mariart-grid-cell-nogap-2);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-m-3 {
        width: var(--mariart-grid-cell-nogap-3);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-m-4 {
        width: var(--mariart-grid-cell-nogap-4);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-m-5 {
        width: var(--mariart-grid-cell-nogap-5);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-m-6 {
        width: var(--mariart-grid-cell-nogap-6);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-m-7 {
        width: var(--mariart-grid-cell-nogap-7);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-m-8 {
        width: var(--mariart-grid-cell-nogap-8);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-m-9 {
        width: var(--mariart-grid-cell-nogap-9);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-m-10 {
        width: var(--mariart-grid-cell-nogap-10);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-m-11 {
        width: var(--mariart-grid-cell-nogap-11);
    }



    
    /*  **********  Cell gap spaces  **********  */
    
    .mariart-grid-cell.mariart-grid-space-m-1 {
        margin-left: calc(var(--mariart-grid-cell-1) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-m-2 {
        margin-left: calc(var(--mariart-grid-cell-2) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-m-3 {
        margin-left: calc(var(--mariart-grid-cell-3) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-m-4 {
        margin-left: calc(var(--mariart-grid-cell-4) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-m-5 {
        margin-left: calc(var(--mariart-grid-cell-5) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-m-6 {
        margin-left: calc(var(--mariart-grid-cell-6) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-m-7 {
        margin-left: calc(var(--mariart-grid-cell-7) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-m-8 {
        margin-left: calc(var(--mariart-grid-cell-8) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-m-9 {
        margin-left: calc(var(--mariart-grid-cell-9) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-m-10 {
        margin-left: calc(var(--mariart-grid-cell-10) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-m-11 {
        margin-left: calc(var(--mariart-grid-cell-11) + var(--mariart-grid-row-padding));
    }
    
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-m-1 {
        margin-left: var(--mariart-grid-cell-nogap-1);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-m-2 {
        margin-left: var(--mariart-grid-cell-nogap-2);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-m-3 {
        margin-left: var(--mariart-grid-cell-nogap-3);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-m-4 {
        margin-left: var(--mariart-grid-cell-nogap-4);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-m-5 {
        margin-left: var(--mariart-grid-cell-nogap-5);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-m-6 {
        margin-left: var(--mariart-grid-cell-nogap-6);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-m-7 {
        margin-left: var(--mariart-grid-cell-nogap-7);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-m-8 {
        margin-left: var(--mariart-grid-cell-nogap-8);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-m-9 {
        margin-left: var(--mariart-grid-cell-nogap-9);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-m-10 {
        margin-left: var(--mariart-grid-cell-nogap-10);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-m-11 {
        margin-left: var(--mariart-grid-cell-nogap-11);
    }
    
}




/*  ********************************************************************************  **

    Large

**  ********************************************************************************  */

@media screen and (min-width: 992px) {
    
    .mariart-grid-cell.mariart-grid-cell-l-1 {
        width: var(--mariart-grid-cell-1);
    }
    .mariart-grid-cell.mariart-grid-cell-l-2 {
        width: var(--mariart-grid-cell-2);
    }
    .mariart-grid-cell.mariart-grid-cell-l-3 {
        width: var(--mariart-grid-cell-3);
    }
    .mariart-grid-cell.mariart-grid-cell-l-4 {
        width: var(--mariart-grid-cell-4);
    }
    .mariart-grid-cell.mariart-grid-cell-l-5 {
        width: var(--mariart-grid-cell-5);
    }
    .mariart-grid-cell.mariart-grid-cell-l-6 {
        width: var(--mariart-grid-cell-6);
    }
    .mariart-grid-cell.mariart-grid-cell-l-7 {
        width: var(--mariart-grid-cell-7);
    }
    .mariart-grid-cell.mariart-grid-cell-l-8 {
        width: var(--mariart-grid-cell-8);
    }
    .mariart-grid-cell.mariart-grid-cell-l-9 {
        width: var(--mariart-grid-cell-9);
    }
    .mariart-grid-cell.mariart-grid-cell-l-10 {
        width: var(--mariart-grid-cell-10);
    }
    .mariart-grid-cell.mariart-grid-cell-l-11 {
        width: var(--mariart-grid-cell-11);
    }
    
    
    
    
    /*  **********  No gap  *********  */
    
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-l-1 {
        width: var(--mariart-grid-cell-nogap-1);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-l-2 {
        width: var(--mariart-grid-cell-nogap-2);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-l-3 {
        width: var(--mariart-grid-cell-nogap-3);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-l-4 {
        width: var(--mariart-grid-cell-nogap-4);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-l-5 {
        width: var(--mariart-grid-cell-nogap-5);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-l-6 {
        width: var(--mariart-grid-cell-nogap-6);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-l-7 {
        width: var(--mariart-grid-cell-nogap-7);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-l-8 {
        width: var(--mariart-grid-cell-nogap-8);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-l-9 {
        width: var(--mariart-grid-cell-nogap-9);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-l-10 {
        width: var(--mariart-grid-cell-nogap-10);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-l-11 {
        width: var(--mariart-grid-cell-nogap-11);
    }



    
    /*  **********  Cell gap spaces  **********  */
    
    .mariart-grid-cell.mariart-grid-space-l-1 {
        margin-left: calc(var(--mariart-grid-cell-1) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-l-2 {
        margin-left: calc(var(--mariart-grid-cell-2) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-l-3 {
        margin-left: calc(var(--mariart-grid-cell-3) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-l-4 {
        margin-left: calc(var(--mariart-grid-cell-4) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-l-5 {
        margin-left: calc(var(--mariart-grid-cell-5) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-l-6 {
        margin-left: calc(var(--mariart-grid-cell-6) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-l-7 {
        margin-left: calc(var(--mariart-grid-cell-7) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-l-8 {
        margin-left: calc(var(--mariart-grid-cell-8) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-l-9 {
        margin-left: calc(var(--mariart-grid-cell-9) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-l-10 {
        margin-left: calc(var(--mariart-grid-cell-10) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-l-11 {
        margin-left: calc(var(--mariart-grid-cell-11) + var(--mariart-grid-row-padding));
    }
    
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-l-1 {
        margin-left: var(--mariart-grid-cell-nogap-1);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-l-2 {
        margin-left: var(--mariart-grid-cell-nogap-2);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-l-3 {
        margin-left: var(--mariart-grid-cell-nogap-3);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-l-4 {
        margin-left: var(--mariart-grid-cell-nogap-4);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-l-5 {
        margin-left: var(--mariart-grid-cell-nogap-5);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-l-6 {
        margin-left: var(--mariart-grid-cell-nogap-6);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-l-7 {
        margin-left: var(--mariart-grid-cell-nogap-7);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-l-8 {
        margin-left: var(--mariart-grid-cell-nogap-8);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-l-9 {
        margin-left: var(--mariart-grid-cell-nogap-9);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-l-10 {
        margin-left: var(--mariart-grid-cell-nogap-10);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-l-11 {
        margin-left: var(--mariart-grid-cell-nogap-11);
    }
    
}




/*  ********************************************************************************  **

    X Large

**  ********************************************************************************  */

@media screen and (min-width: 1200px) {
    
    .mariart-grid-cell.mariart-grid-cell-xl-1 {
        width: var(--mariart-grid-cell-1);
    }
    .mariart-grid-cell.mariart-grid-cell-xl-2 {
        width: var(--mariart-grid-cell-2);
    }
    .mariart-grid-cell.mariart-grid-cell-xl-3 {
        width: var(--mariart-grid-cell-3);
    }
    .mariart-grid-cell.mariart-grid-cell-xl-4 {
        width: var(--mariart-grid-cell-4);
    }
    .mariart-grid-cell.mariart-grid-cell-xl-5 {
        width: var(--mariart-grid-cell-5);
    }
    .mariart-grid-cell.mariart-grid-cell-xl-6 {
        width: var(--mariart-grid-cell-6);
    }
    .mariart-grid-cell.mariart-grid-cell-xl-7 {
        width: var(--mariart-grid-cell-7);
    }
    .mariart-grid-cell.mariart-grid-cell-xl-8 {
        width: var(--mariart-grid-cell-8);
    }
    .mariart-grid-cell.mariart-grid-cell-xl-9 {
        width: var(--mariart-grid-cell-9);
    }
    .mariart-grid-cell.mariart-grid-cell-xl-10 {
        width: var(--mariart-grid-cell-10);
    }
    .mariart-grid-cell.mariart-grid-cell-xl-11 {
        width: var(--mariart-grid-cell-11);
    }
    
    
    
    
    /*  **********  No gap  *********  */
    
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xl-1 {
        width: var(--mariart-grid-cell-nogap-1);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xl-2 {
        width: var(--mariart-grid-cell-nogap-2);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xl-3 {
        width: var(--mariart-grid-cell-nogap-3);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xl-4 {
        width: var(--mariart-grid-cell-nogap-4);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xl-5 {
        width: var(--mariart-grid-cell-nogap-5);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xl-6 {
        width: var(--mariart-grid-cell-nogap-6);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xl-7 {
        width: var(--mariart-grid-cell-nogap-7);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xl-8 {
        width: var(--mariart-grid-cell-nogap-8);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xl-9 {
        width: var(--mariart-grid-cell-nogap-9);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xl-10 {
        width: var(--mariart-grid-cell-nogap-10);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xl-11 {
        width: var(--mariart-grid-cell-nogap-11);
    }



    
    /*  **********  Cell gap spaces  **********  */
    
    .mariart-grid-cell.mariart-grid-space-xl-1 {
        margin-left: calc(var(--mariart-grid-cell-1) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xl-2 {
        margin-left: calc(var(--mariart-grid-cell-2) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xl-3 {
        margin-left: calc(var(--mariart-grid-cell-3) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xl-4 {
        margin-left: calc(var(--mariart-grid-cell-4) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xl-5 {
        margin-left: calc(var(--mariart-grid-cell-5) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xl-6 {
        margin-left: calc(var(--mariart-grid-cell-6) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xl-7 {
        margin-left: calc(var(--mariart-grid-cell-7) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xl-8 {
        margin-left: calc(var(--mariart-grid-cell-8) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xl-9 {
        margin-left: calc(var(--mariart-grid-cell-9) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xl-10 {
        margin-left: calc(var(--mariart-grid-cell-10) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xl-11 {
        margin-left: calc(var(--mariart-grid-cell-11) + var(--mariart-grid-row-padding));
    }
    
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xl-1 {
        margin-left: var(--mariart-grid-cell-nogap-1);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xl-2 {
        margin-left: var(--mariart-grid-cell-nogap-2);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xl-3 {
        margin-left: var(--mariart-grid-cell-nogap-3);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xl-4 {
        margin-left: var(--mariart-grid-cell-nogap-4);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xl-5 {
        margin-left: var(--mariart-grid-cell-nogap-5);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xl-6 {
        margin-left: var(--mariart-grid-cell-nogap-6);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xl-7 {
        margin-left: var(--mariart-grid-cell-nogap-7);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xl-8 {
        margin-left: var(--mariart-grid-cell-nogap-8);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xl-9 {
        margin-left: var(--mariart-grid-cell-nogap-9)
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xl-10 {
        margin-left: var(--mariart-grid-cell-nogap-10);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xl-11 {
        margin-left: var(--mariart-grid-cell-nogap-11);
    }
    
}




/*  ********************************************************************************  **

    XX Large

**  ********************************************************************************  */

@media screen and (min-width: 1450px) {
    
    .mariart-grid-cell.mariart-grid-cell-xxl-1 {
        width: var(--mariart-grid-cell-1);
    }
    .mariart-grid-cell.mariart-grid-cell-xxl-2 {
        width: var(--mariart-grid-cell-2);
    }
    .mariart-grid-cell.mariart-grid-cell-xxl-3 {
        width: var(--mariart-grid-cell-3);
    }
    .mariart-grid-cell.mariart-grid-cell-xxl-4 {
        width: var(--mariart-grid-cell-4);
    }
    .mariart-grid-cell.mariart-grid-cell-xxl-5 {
        width: var(--mariart-grid-cell-5);
    }
    .mariart-grid-cell.mariart-grid-cell-xxl-6 {
        width: var(--mariart-grid-cell-6);
    }
    .mariart-grid-cell.mariart-grid-cell-xxl-7 {
        width: var(--mariart-grid-cell-7);
    }
    .mariart-grid-cell.mariart-grid-cell-xxl-8 {
        width: var(--mariart-grid-cell-8);
    }
    .mariart-grid-cell.mariart-grid-cell-xxl-9 {
        width: var(--mariart-grid-cell-9);
    }
    .mariart-grid-cell.mariart-grid-cell-xxl-10 {
        width: var(--mariart-grid-cell-10);
    }
    .mariart-grid-cell.mariart-grid-cell-xxl-11 {
        width: var(--mariart-grid-cell-11);
    }
    
    
    
    
    /*  **********  No gap  *********  */
    
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xxl-1 {
        width: var(--mariart-grid-cell-nogap-1);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xxl-2 {
        width: var(--mariart-grid-cell-nogap-2);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xxl-3 {
        width: var(--mariart-grid-cell-nogap-3);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xxl-4 {
        width: var(--mariart-grid-cell-nogap-4);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xxl-5 {
        width: var(--mariart-grid-cell-nogap-5);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xxl-6 {
        width: var(--mariart-grid-cell-nogap-6);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xxl-7 {
        width: var(--mariart-grid-cell-nogap-7);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xxl-8 {
        width: var(--mariart-grid-cell-nogap-8);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xxl-9 {
        width: var(--mariart-grid-cell-nogap-9);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xxl-10 {
        width: var(--mariart-grid-cell-nogap-10);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-cell-xxl-11 {
        width: var(--mariart-grid-cell-nogap-11);
    }



    
    /*  **********  Cell gap spaces  **********  */
    
    .mariart-grid-cell.mariart-grid-space-xxl-1 {
        margin-left: var(--mariart-grid-cell-1) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xxl-2 {
        margin-left: var(--mariart-grid-cell-2) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xxl-3 {
        margin-left: var(--mariart-grid-cell-3) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xxl-4 {
        margin-left: var(--mariart-grid-cell-4) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xxl-5 {
        margin-left: var(--mariart-grid-cell-5) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xxl-6 {
        margin-left: var(--mariart-grid-cell-6) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xxl-7 {
        margin-left: var(--mariart-grid-cell-7) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xxl-8 {
        margin-left: var(--mariart-grid-cell-8) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xxl-9 {
        margin-left: var(--mariart-grid-cell-9) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xxl-10 {
        margin-left: var(--mariart-grid-cell-10) + var(--mariart-grid-row-padding));
    }
    .mariart-grid-cell.mariart-grid-space-xxl-11 {
        margin-left: var(--mariart-grid-cell-11) + var(--mariart-grid-row-padding));
    }
    
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xxl-1 {
        margin-left: var(--mariart-grid-cell-nogap-1);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xxl-2 {
        margin-left: var(--mariart-grid-cell-nogap-2);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xxl-3 {
        margin-left: var(--mariart-grid-cell-nogap-3);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xxl-4 {
        margin-left: var(--mariart-grid-cell-nogap-4);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xxl-5 {
        margin-left: var(--mariart-grid-cell-nogap-5);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xxl-6 {
        margin-left: cvar(--mariart-grid-cell-nogap-6);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xxl-7 {
        margin-left: var(--mariart-grid-cell-nogap-7);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xxl-8 {
        margin-left: var(--mariart-grid-cell-nogap-8);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xxl-9 {
        margin-left: var(--mariart-grid-cell-nogap-9);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xxl-10 {
        margin-left: var(--mariart-grid-cell-nogap-10);
    }
    .mariart-grid-row.no-gap .mariart-grid-cell.mariart-grid-space-xxl-11 {
        margin-left: var(--mariart-grid-cell-nogap-11);
    }
    
}