:root {
    --cell-spacing: 2rem;
}


/* Template 2 cell */
.template-box-2cell {
    display: flex;
}

.template-box-2cell > div {
    flex: 50%;
}

.template-box-2cell > div:first-child {
    padding-right: calc(var(--cell-spacing) / 2);
}

.template-box-2cell > div:last-child {
    padding-left: calc(var(--cell-spacing) / 2);
}

.template-box-2cell p:last-child {
    margin-bottom: 0;
}

.cke_editable .template-box-2cell,
.cke_editable .template-box-2cell > div {
    outline: #d3d3d3 1px dotted;
}

@media all and (max-width: 768px) {
    body .template-box-2cell {
        flex-direction: column;
    }

    body .template-box-2cell > div {
        flex-basis: 100%;
        padding: 0;
    }

    body .template-box-2cell > div:first-child {
        padding: 0;
    }

    body .template-box-2cell > div:last-child {
        padding: 0;
    }

    body .template-box-2cell > div:last-child {
        text-align: initial;
        margin-top: 1rem;
    }
}

/* Template 3 cell */
.template-box-3cell {
    display: flex;
}

.template-box-3cell > div {
    flex: 33.33333%;
}

.template-box-3cell > div {
    padding-left: calc(var(--cell-spacing) / 2);
    padding-right: calc(var(--cell-spacing) / 2);
}

.template-box-3cell > div:first-child {
    padding-left: 0;
}

.template-box-3cell > div:last-child {
    padding-right: 0;
}

.cke_editable .template-box-3cell,
.cke_editable .template-box-3cell > div {
    outline: #d3d3d3 1px dotted;
}

@media all and (max-width: 768px) {
    .template-box-3cell > div {
        padding: 0;
    }

    .template-box-3cell {
        flex-flow: column;
    }

    .template-box-3cell > div:last-child {
        width: 100%;
        padding: 0;
    }

    .template-box-3cell > div:first-child {
        width: 100%;
        margin-bottom: 1rem;
        padding: 0;
    }
}

/* Template 4 cell */
.template-box-4cell {
    display: flex;
}

.template-box-4cell > div {
    width: 25%;
    padding-left: calc(var(--cell-spacing) / 2);
    padding-right: calc(var(--cell-spacing) / 2);
}

.template-box-4cell > div:first-child {
    padding-left: 0;
}

.template-box-4cell > div:last-child {
    padding-right: 0;
}

.template-box-4cell p:last-child {
    margin-bottom: 0;
}

.cke_editable .template-box-4cell,
.cke_editable .template-box-4cell > div {
    outline: #d3d3d3 1px dotted;
}

@media all and (max-width: 1020px) {
    .template-box-4cell {
        flex-wrap: wrap;
    }

    .template-box-4cell > div {
        width: 50%;
    }

    .template-box-4cell > div:nth-child(2n) {
        padding-right: 0;
    }

    .template-box-4cell > div:nth-child(3n) {
        padding-left: 0;
    }
}

@media all and (max-width: 768px) {
    .template-box-4cell > div {
        width: 100%;
        padding: 0;
        margin-bottom: 1rem;
    }
}

/* Template 1/3 and 2/3 cell */
.template-box-13-23-cell {
    display: flex;
}

.template-box-13-23-cell > div:first-child {
    width: 33%;
    padding-right: calc(var(--cell-spacing) / 2);
}

.template-box-13-23-cell > div:last-child {
    width: 67%;
    padding-left: calc(var(--cell-spacing) / 2);
}

.template-box-13-23-cell p:last-child {
    margin-bottom: 0;
}

.cke_editable .template-box-13-23-cell,
.cke_editable .template-box-13-23-cell > div {
    outline: #d3d3d3 1px dotted;
}

@media all and (max-width: 768px) {
    .template-box-13-23-cell {
        flex-flow: column;
    }

    .template-box-13-23-cell > div:last-child {
        width: 100%;
        padding: 0;
    }

    .template-box-13-23-cell > div:first-child {
        width: 100%;
        margin-bottom: 1rem;
        padding: 0;
    }
}

/* template 2/3 and 1/3 cell */
.template-box-23-13-cell {
    display: flex;
}

.template-box-23-13-cell > div:first-child {
    width: 67%;
    padding-right: calc(var(--cell-spacing) / 2);
}

.template-box-23-13-cell > div:last-child {
    width: 33%;
    padding-left: calc(var(--cell-spacing) / 2);
}

.template-box-23-13-cell p:last-child {
    margin-bottom: 0;
}

.cke_editable .template-box-23-13-cell,
.cke_editable .template-box-23-13-cell > div {
    outline: #d3d3d3 1px dotted;
}

@media all and (max-width: 768px) {
    .template-box-23-13-cell {
        flex-flow: column;
    }

    .template-box-23-13-cell > div:last-child {
        width: 100%;
        padding: 0;
    }

    .template-box-23-13-cell > div:first-child {
        width: 100%;
        margin-bottom: 1rem;
        padding: 0;
    }
}