.layout-split { --ls-gap: 3rem; }
.layout-split-mainzone { display: flex; gap: var(--ls-gap); }
.layout-split-leftzone { flex: 1; min-width: 0; order: 0; }
.layout-split-rightzone { flex: 1; min-width: 0; order: 1; }

[data-device="pad"] .layout-split-mainzone { gap: 1rem; flex-direction: column; padding: 0 1rem; }
[data-device="pad"] .layout-split-leftzone { order: 0; margin-bottom: 0.5rem; }
[data-device="pad"] .layout-split-rightzone { order: 1; }

[data-device="phone"] .layout-split-mainzone { gap: 0; flex-direction: column; padding: 0 1rem; }
[data-device="phone"] .layout-split-leftzone { order: 0; margin-bottom: 0.5rem; }
[data-device="phone"] .layout-split-rightzone { order: 1; }