.form-canvas-dropzone {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 0.5rem !important;
    width: 100%;
}

.form-canvas-dropzone > .b-drop-zone-draggable,
.form-canvas-dropzone > .draggable-placeholder {
    grid-column: span 12;
}

.form-canvas-dropzone > .b-drop-zone-draggable:has([data-width="12"]) {
    grid-column: span 12;
}

.form-canvas-dropzone > .b-drop-zone-draggable:has([data-width="9"]) {
    grid-column: span 9;
}

.form-canvas-dropzone > .b-drop-zone-draggable:has([data-width="8"]) {
    grid-column: span 8;
}

.form-canvas-dropzone > .b-drop-zone-draggable:has([data-width="6"]) {
    grid-column: span 6;
}

.form-canvas-dropzone > .b-drop-zone-draggable:has([data-width="4"]) {
    grid-column: span 4;
}

.form-canvas-dropzone > .b-drop-zone-draggable:has([data-width="3"]) {
    grid-column: span 3;
}

.form-canvas-dropzone > .b-drop-zone-draggable[style*="opacity"]:has([data-width="12"]) ~ .draggable-placeholder,
.form-canvas-dropzone > .b-drop-zone-draggable[draggable="true"]:has([data-width="12"]) ~ .draggable-placeholder {
    grid-column: span 12;
}

.form-canvas-dropzone > .b-drop-zone-draggable[style*="opacity"]:has([data-width="9"]) ~ .draggable-placeholder,
.form-canvas-dropzone > .b-drop-zone-draggable[draggable="true"]:has([data-width="9"]) ~ .draggable-placeholder {
    grid-column: span 9;
}

.form-canvas-dropzone > .b-drop-zone-draggable[style*="opacity"]:has([data-width="8"]) ~ .draggable-placeholder,
.form-canvas-dropzone > .b-drop-zone-draggable[draggable="true"]:has([data-width="8"]) ~ .draggable-placeholder {
    grid-column: span 8;
}

.form-canvas-dropzone > .b-drop-zone-draggable[style*="opacity"]:has([data-width="6"]) ~ .draggable-placeholder,
.form-canvas-dropzone > .b-drop-zone-draggable[draggable="true"]:has([data-width="6"]) ~ .draggable-placeholder {
    grid-column: span 6;
}

.form-canvas-dropzone > .b-drop-zone-draggable[style*="opacity"]:has([data-width="4"]) ~ .draggable-placeholder,
.form-canvas-dropzone > .b-drop-zone-draggable[draggable="true"]:has([data-width="4"]) ~ .draggable-placeholder {
    grid-column: span 4;
}

.form-canvas-dropzone > .b-drop-zone-draggable[style*="opacity"]:has([data-width="3"]) ~ .draggable-placeholder,
.form-canvas-dropzone > .b-drop-zone-draggable[draggable="true"]:has([data-width="3"]) ~ .draggable-placeholder {
    grid-column: span 3;
}