@charset "UTF-8";
/**
 *  @package mariart
 *
 *  This class sets up our layout and container styles for the Mariart system.
 */

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

    CSS variables

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

:root {
    
    /*  **********  Layout containers  *********  */
    
    --mariart-max-site-width: 1800px;
    
    --mariart-container-padding-x: 5%;
    --mariart-container-padding-y: 60px;
    
    --mariart-column-gap: 60px;
    --mariart-grid-gap: 20px;
    
}




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

    Containers

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

.mariart-container {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0;
    padding: var(--mariart-container-padding-y) var(--mariart-container-padding-x);
    box-sizing: border-box;
}
.mariart-container > div {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: var(--mariart-max-site-width);
    height: auto;
    box-sizing: border-box;
}




/*  **********  Container widths  **********  */

.mariart-container.narrow {
    padding-left: calc(var(--mariart-container-padding-x) * 2);
    padding-right: calc(var(--mariart-container-padding-x) * 2);
}
.mariart-container.thin {
    padding-left: calc(var(--mariart-container-padding-x) * 4);
    padding-right: calc(var(--mariart-container-padding-x) * 4);
}




/*  *********  Container padding  *********  */

.mariart-container.no-top-padding {
    padding-top: 0 !important;
}
.mariart-container.no-bottom-padding {
    padding-bottom: 0 !important;
}
.mariart-container.no-left-padding {
    padding-left: 0 !important;
}
.mariart-container.no-right-padding {
    padding-right: 0 !important;
}