/* Media Query
--------------------*/
@media screen {
    /* .ce_multicolumnStart.bg-white {
        background: #fff;
    }

    This is old way: where multicolumn has class starting with .bg
    Newer way is to use same class *-box for regular CE and Multi-Col CE
    [class^="bg-"].ce_multicolumnStart, [class*=" bg-"].ce_multicolumnStart {
        padding: 1rem 1rem 1px;
        padding-left: calc(var(--block-padding) * 1rem);
        padding-right: calc(var(--block-padding) * 1rem);
    }

    But you should not define any other class with -box in name
    */

    [class*="-box"].ce_multicolumnStart {
        margin-left: calc(var(--block-padding) * 1rem);
        margin-right: calc(var(--block-padding) * 1rem);
    }

    [class*="-box"].block {
        margin-bottom: 1.5rem;
    }

    [class^="flex-"] > [class*="-box"] .inside_ce, [class*=" flex-"] >  [class*="-box"] .inside_ce {
        /* height: calc(100% - 2rem);
        display: grid;
        grid-template-rows: auto 1fr; */

        /* from VSP */
        display: flex;
        height: 100%;
        box-sizing: border-box;
    }

    [class*=" flex-"] > [class*="-box"] .content-div {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: 100%;
    }


    [class*="-box"] .inside_ce {
        padding: 1rem;
        transition: all 0.6s cubic-bezier(.25,.1,.25,1);
    }



    [class*="-box"] .float_below {
        margin-top: auto
    }

    [class*="-box"] * {
		color: #fff;
    }

    [class*="-box"] p:last-child {
        margin-top: auto;
    }

}

/* Mobile-landscape (and larger) lansacape */
@media only screen and (min-width: 480px) {
}


/* min-width:768px Tablet-portrait (and larger) */
@media only screen and (min-width: 768px) {
    [class^="bg-"].ce_multicolumnStart, [class*=" bg-"].ce_multicolumnStart {
        margin-left: calc(var(--block-padding) * 1rem);
        margin-right: calc(var(--block-padding) * 1rem);
        padding: 2rem 1rem 1px;
    }

    [class*="-box"] .like-h2,
    [class*="-box"] h2 {
		font-size: 1.68rem;
	}
}


/* Tablet-landscape (and larger) for width 992px */
@media only screen and (min-width: 992px) {
}

/* min-width:1100 */
@media only screen and (min-width:1100px) {

    [class*="-box"].ce_multicolumnStart .inside_ce {
        padding: 1.5rem  0.5rem;
    }

    [class*="-box"] .inside_ce {
        padding: 1.5rem ;
    }

    [class^="bg-"].ce_multicolumnStart, [class*=" bg-"].ce_multicolumnStart {
        padding: 3rem 3rem 1px;
    }

}

/* min-width:1300 Laptops (and larger) for width 1300px */
@media only screen and (min-width:1300px) {
}
/* Media ends
--------------------*/

/* Red Box
--------------------*/
@media screen {

    .ce_multicolumnStart.grey-box,
    .red-box .inside_ce {
        background: var(--bc-red);
    }

}
/* Red Box ends
--------------------*/


/* Grey Box
--------------------*/
@media screen {

    .ce_multicolumnStart.grey-box,
    .grey-box .inside_ce {
        background: var(--bc-light-grey);
    }

    .grey-box * {
		color: #000;
    }
}
/* Grey Box ends
--------------------*/


/* Bluebox Query
--------------------*/
@media screen {
    .blue-box .inside_ce {
        background: var(--elair-blue);
    }
}
/* Bluebox ends
--------------------*/