/************************************************
 * Container
 ************************************************/
.grid_wrapper{margin: 0 -0.625rem;}
.grid{  position: relative; }
.grid_single_content_wrapper{ padding: 0 .625rem; }
.grid_sidebar_wrapper{ padding: 0 .625rem; }

/************************************************
 * Items-Behaviour
 ************************************************/
.grid_item{
    width: 100%; position: relative; padding: .625rem;
    opacity: 1; visibility: visible;
}
.grid_item.grid_sizer{padding: 0 !important;}

.grid_item.grid_item_width0{
    width: 0 !important; height: 0 !important; padding: 0 !important;
    margin: 0 !important; border: 0 !important;
    opacity: 0; visibility: visible;
}

[data-fitWidth="true"] .grid_item{
    width: 18.5rem;
}

/************************************************
 * Items-Stylings
 ************************************************/
.grid_item .grid_image{
    display: block; margin-bottom: .5rem;
}
.grid_item .grid_image[data-ratio]{
    position: relative; padding-bottom: 56.25%;
}

.grid_item .grid_cta .button{
    margin-bottom: 0;
}





/*###############################################
 # Medium and UP
 ###############################################*/
@media screen and (min-width: 40em) {
    /************************************************
     * Container
     ************************************************/
    .grid_wrapper{margin: 0 -0.9375rem;}
    .grid_single_content_wrapper{ padding: 0 .9375rem; }
    .grid_sidebar_wrapper{ padding: 0 .9375rem; }
    
    /************************************************
     * Items-Behaviour
     ************************************************/
    .grid_item{width: 50%; padding: .9375rem; }

}

/*###############################################
 # Large and UP
 ###############################################*/
@media screen and (min-width: 64em) {    
    
    /************************************************
     * Items-Behaviour
     ************************************************/
    .grid_item{width: 33.333%;}
    .with_sidebar .grid_item{ width: 50%;}
    
    
    /************************************************
     * Sidebar
     ************************************************/
    .grid_wrapper.with_sidebar{ font-size: 0;}
    .grid_wrapper.with_sidebar > *{ font-size: 1rem;}
    .with_sidebar .grid_single_content_wrapper,
    .with_sidebar .grid_sidebar_wrapper,
    .with_sidebar .grid{
        display: inline-block; vertical-align: top;
    }
    
    .with_sidebar .grid_single_content_wrapper{ width: 66.666%; }
    .with_sidebar .grid_sidebar_wrapper{ width: 33.333%; }
    .with_sidebar .grid{ width: 66.666%; }
}