/* For Article use bg- and Forn Content Element -box is used */

/* Media Query
--------------------*/
@media screen {

    [class*="-box "].ce_multicolumnStart,
    [class$="-box"].ce_multicolumnStart {
        padding: 1rem 1rem 1px;
        padding-left: calc(var(--block-padding) * 1rem);
        padding-right: calc(var(--block-padding) * 1rem);
        margin-left: calc(var(--block-padding) * 1rem);
        margin-right: calc(var(--block-padding) * 1rem);
        border-radius: 6px;
        align-items: center;
    }
}

/* 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*="-box "].ce_multicolumnStart,
    [class$="-box"].ce_multicolumnStart {
        margin-left: calc(var(--block-padding) * 1rem);
        margin-right: calc(var(--block-padding) * 1rem);
        padding: 2rem 1rem 1px;
        border-radius: 10px;
    }
}


/* 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,
    [class$="-box"].ce_multicolumnStart {
        padding: 3rem 3rem 1px;
    }
}

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

/* Media ends
--------------------*/


/* BlueBox Query
--------------------*/
@media screen {

    .blue-box .inside_ce {
        background: var(--theme-blue) !important;
        height: 100%;
    }

    .blue-box .content-div {
        color: #fff;
    }

    .blue-box .content-div a {
        color: #fff;
    }

    .blue-box .content-div a:hover {
        color: #000;
    }

    .blue-box figure a:after {
        content: "";
        display: block;
        width: 100%;
        padding-bottom: 100%;
    }

    .blue-box .link-arrow a:after {
        filter: brightness(0) invert(1);
    }

}

/* min-width:768px Tablet-portrait (and larger) */
@media only screen and (min-width: 768px) {
    .blue-box .content-div {
        padding: 1rem 1.5rem 1.5rem;
    }
}

/* BlueBox ends
--------------------*/

/* RedBox Query
--------------------*/
@media screen {

    .red-box .inside_ce {
        background: var(--theme-red) !important;
        height: 100%;
    }

    .red-box .content-div {
        color: #fff;
    }

    .red-box .content-div a {
        color: #fff;
    }

    .red-box .content-div a:hover {
        color: #000;
    }

    .red-box figure a:after {
        content: "";
        display: block;
        width: 100%;
        padding-bottom: 100%;
    }

    .red-box .link-arrow a:after {
        filter: brightness(0) invert(1);
    }

}

/* min-width:768px Tablet-portrait (and larger) */
@media only screen and (min-width: 768px) {
    .red-box .content-div {
        padding: 1rem 1.5rem 1.5rem;
    }
}

/* BlueBox ends
--------------------*/


/* Lightgrey Box
--------------------*/
@media screen {
    .lightgrey-box {
        background: var(--theme-lightgrey);
    }
}

/* Lightgrey Box Query ends
--------------------*/