.color-box {
    padding: var(--spacing-3x);
    border-radius: var(--radius-15-x);
    background: var(--surface-2);
    width: fit-content;
    margin: var(--spacing-3x) var(--spacing-0x);
}

.color-box:not(:has(.color-box-item))::after {
    content: '';
    display: table;
    clear: both
}

.color-box.color {
    background: var(--action-secondary);
}

.color-box.fluid {
    width: 100%;
}

.wysiwyg-part .color-box:not(:has(.color-box-item)) *:first-child,
.wysiwyg-part .color-box:not(:has(.color-box-item)) *:first-child *:first-child {
    margin-top: var(--spacing-0x);
}

.wysiwyg-part .color-box:not(:has(.color-box-item)) > :last-child,
.wysiwyg-part .color-box:not(:has(.color-box-item)) > :last-child *:last-child {
    margin-bottom: var(--spacing-0x);
}

.color-box:has(.color-box-item) {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-5x);
}

@media (max-width: 768px) {
    .color-box:has(.color-box-item) {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .color-box img {
        width: 100%;
    }
}