:root {
    --cb-2col-gap: 2rem;

    /* BOX */
    --cb-box-padding: 1rem;
    --cb-box-background: #fff;
    --cb-box-border-radius: 1rem;
    --cb-box-align-self: start;
}

.cb-2col {
    container: cb-2col / inline-size;
}

.cb-2col__content-wrapper {
    display: grid;
    gap: var(--cb-2col-gap);

    /* no box */
    &:not(:has(.cb-2col__box)) {
        display: block;
    }

    /* Box right */
    &:has(> .cb-2col__wide + .cb-2col__box) {
        grid-template-columns: [left-start] minmax(auto, 1fr) [left-end] 1fr 1fr [right-start] minmax(20rem, 1fr) [right-end];
    }
    /* Box left */
    &:has(> .cb-2col__box + .cb-2col__wide) {
        grid-template-columns: [left-start] minmax(20rem, 1fr) [left-end] 1fr 1fr [right-start] minmax(auto, 1fr) [right-end];
    }
}

.cb-2col__wide {
    grid-column-start: left-end;
    grid-column-end: right-end;
}

.cb-2col__wide:has(+ .cb-2col__box) {
    grid-column-start: left-start;
    grid-column-end: right-start;
}

.cb-2col__box {
    grid-column: right;
    padding: var(--cb-box-padding);
    background: var(--cb-box-background);
    border-radius: var(--cb-box-border-radius);
    align-self: var(--cb-box-align-self);
}

.cb-2col__box:has(+ .cb-2col__wide) {
    grid-column: left;
}

@container cb-2col (width < 45rem) {
    .cb-2col__wide,
    .cb-2col__wide:has(+ .cb-2col__box),
    .cb-2col__box,
    .cb-2col__box:has(+ .cb-2col__wide) {
        grid-column-start: left-start;
        grid-column-end: right-end;
    }
}