.flexbox-element {
    min-width: 0;
    margin-block: 2rem;
}

.cms-flexbox {
    display: flex;
    min-width: 0;
    gap: 2rem;
}

.cms-flexbox[data-direction="row"] { flex-direction: row; }
.cms-flexbox[data-direction="column"] { flex-direction: column; }
.cms-flexbox[data-wrap="wrap"] { flex-wrap: wrap; }
.cms-flexbox[data-wrap="nowrap"] { flex-wrap: nowrap; }

.cms-flexbox[data-justify="start"] { justify-content: flex-start; }
.cms-flexbox[data-justify="center"] { justify-content: center; }
.cms-flexbox[data-justify="end"] { justify-content: flex-end; }
.cms-flexbox[data-justify="space-between"] { justify-content: space-between; }
.cms-flexbox[data-justify="space-around"] { justify-content: space-around; }

.cms-flexbox[data-align="stretch"] { align-items: stretch; }
.cms-flexbox[data-align="start"] { align-items: flex-start; }
.cms-flexbox[data-align="center"] { align-items: center; }
.cms-flexbox[data-align="end"] { align-items: flex-end; }

.cms-flexbox[data-gap="none"] { gap: 0; }
.cms-flexbox[data-gap="small"] { gap: 1rem; }
.cms-flexbox[data-gap="normal"] { gap: 2rem; }
.cms-flexbox[data-gap="large"] { gap: 3rem; }
.cms-flexbox[data-gap="xlarge"] { gap: 4rem; }

body.rc-is-editing .flexbox-element {
    padding: 0.75rem;
    border: 1px dashed rgba(30, 130, 90, 0.4);
    border-radius: 0.75rem;
}

body.rc-is-editing .cms-flexbox > .rc-dropzone {
    flex: 1 0 100%;
    min-width: 12rem;
}

@media (max-width: 640px) {
    .cms-flexbox[data-direction="row"] {
        flex-wrap: wrap;
    }
}