.wireframe-canvas {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: var(--wf-areas-desktop);
    gap: var(--wf-gap, 16px);
    background: var(--wf-bg, transparent);
    color: inherit;
}

.wireframe-canvas__slot {
    min-width: 0;
}

.wireframe-canvas__slot > * {
    height: 100%;
}

.wireframe-canvas__overflow {
    display: grid;
    gap: var(--wf-gap, 16px);
    margin-top: var(--wf-gap, 16px);
}

.wireframe-canvas__slot[data-slot="A"] { grid-area: A; }
.wireframe-canvas__slot[data-slot="B"] { grid-area: B; }
.wireframe-canvas__slot[data-slot="C"] { grid-area: C; }
.wireframe-canvas__slot[data-slot="D"] { grid-area: D; }
.wireframe-canvas__slot[data-slot="E"] { grid-area: E; }
.wireframe-canvas__slot[data-slot="F"] { grid-area: F; }
.wireframe-canvas__slot[data-slot="G"] { grid-area: G; }
.wireframe-canvas__slot[data-slot="H"] { grid-area: H; }
.wireframe-canvas__slot[data-slot="I"] { grid-area: I; }
.wireframe-canvas__slot[data-slot="J"] { grid-area: J; }
.wireframe-canvas__slot[data-slot="K"] { grid-area: K; }
.wireframe-canvas__slot[data-slot="L"] { grid-area: L; }
.wireframe-canvas__slot[data-slot="M"] { grid-area: M; }
.wireframe-canvas__slot[data-slot="N"] { grid-area: N; }
.wireframe-canvas__slot[data-slot="O"] { grid-area: O; }
.wireframe-canvas__slot[data-slot="P"] { grid-area: P; }
.wireframe-canvas__slot[data-slot="Q"] { grid-area: Q; }
.wireframe-canvas__slot[data-slot="R"] { grid-area: R; }
.wireframe-canvas__slot[data-slot="S"] { grid-area: S; }
.wireframe-canvas__slot[data-slot="T"] { grid-area: T; }
.wireframe-canvas__slot[data-slot="U"] { grid-area: U; }
.wireframe-canvas__slot[data-slot="V"] { grid-area: V; }
.wireframe-canvas__slot[data-slot="W"] { grid-area: W; }
.wireframe-canvas__slot[data-slot="X"] { grid-area: X; }
.wireframe-canvas__slot[data-slot="Y"] { grid-area: Y; }
.wireframe-canvas__slot[data-slot="Z"] { grid-area: Z; }

@media (max-width: 1023px) {
    .wireframe-canvas {
        grid-template-areas: var(--wf-areas-tablet, var(--wf-areas-desktop));
    }
}

@media (max-width: 768px) {
    .wireframe-canvas {
        grid-template-columns: 1fr;
        grid-template-areas: var(--wf-areas-mobile, var(--wf-areas-mobile-fallback, var(--wf-areas-tablet, var(--wf-areas-desktop))));
    }
}