/* ------------------- Grid css - Start-------------------  */

.ectbe-grid-wrapper {
    display: flex;
    flex-wrap: wrap;
    --e-ectbe-grid-layout-display: flex;
    --e-ectbe-grid-layout-direction: column;
    --e-ectbe-content-box-padding: 0;
    --event-column: 3;
}

.ectbe-grid-wrapper .ectbe-content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.ectbe-grid-wrapper .ectbe-date-wrp {
    --align-items: center;
    --justify-content: center;
    --flex-wrap: wrap;
    font-size: 40px;
    color: var(--e-ectbe-date-area-color);
    display: var(--e-ectbe-date-area-flex);
    margin: var(--e-ectbe-date-area-margin);
    line-height: initial;
    font-weight: 600;
    width: var(--e-ectbe-evt-current-item-width);
    padding: var(--e-ectbe-date-area-padding);
    background-color: var(--e-ectbe-date-area-background);
   
}

.ectbe-grid-wrapper .ectbe-nested-content>* {
    margin-bottom: 5px;
}

.ectbe-wrapper.ectbe-grid-wrapper .ectbe-evt-more-box {
    display: flex;
    width: var(--e-ectbe-evt-current-item-width);
    color: var(--e-ectbe-evt-read-more-color);
    background-color: var(--e-ectbe-evt-read-more-bg-color);
    font-size: var(--e-ectbe-evt-read-more-size);
    justify-content: var(--justify-content);
}


/* pagination css - Start  */

.ectbe-grid-wrapper .ectbe-pagination {
    width: 100%;
}


/* pagination css - End */


/* ------------------- Responsive css -start -------------------  */

@media screen and (min-width:991px) {
    .ectbe-grid-wrapper .ectbe-inner-wrapper {
        
        flex-basis: calc((100%/var(--event-column)) - (var(--ectbe-bg-left-margin) + var(--ectbe-bg-right-margin)));
    }
}

@media screen and (max-width:990px) and (min-width:768px) {
    .ectbe-grid-wrapper .ectbe-inner-wrapper {
        flex-basis: calc(50% - (var(--ectbe-bg-left-margin) + var(--ectbe-bg-right-margin)));
    }
}

@media screen and (max-width:767px) {
    .ectbe-wrapper.ectbe-grid-wrapper,
    .ectbe-grid-wrapper .ectbe-content {
        flex-direction: column;
        flex-wrap: nowrap;
    }
}


/* ------------------- Responsive css - End ------------------- */