:root {
    --box-colour: oklch(0.9 0 0);
    --box-colour-light: oklch(from var(--box-colour) calc(l * 1.1) c h);
    --box-colour-dark: oklch(from var(--box-colour) calc(l * 0.9) c h);
    --box-border-colour: var(--box-colour-light) var(--box-colour-light) var(--box-colour-dark) var(--box-colour-dark);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) minmax(200px, 1fr);
    grid-auto-flow: dense;
    gap: 1rem;

    justify-content: stretch;
}

.box {
    border: 10px solid;
    border-color: var(--box-border-colour);
    background-color: var(--box-colour);
    padding: 0.25em 0.75em 0.5em;
}

.tabbed {
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: min-content minmax(auto, 1fr);
    grid-template-areas:
        "tab ."
        "content content";

    .tab {
        grid-area: tab;

        border: 10px solid;
        border-color: var(--box-border-colour);
        background-color: var(--box-colour);
        border-bottom: none;

        text-wrap: nowrap;
        padding: 0 .4em;

        position: relative;
        top: 10px;
    }

    .box {
        grid-area: content;
    }
}

.w-2 {
    grid-column-end: span 2;
}

.w-3 {
    grid-column-end: span 3;
}

.w-4 {
    grid-column-end: span 4;
}

.h-2 {
    grid-row-end: span 2;
}

.w-full {
    grid-column: 1 / -2;
}

@media screen and (max-width: 760px) {
    .grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .w-full {
        grid-column: 1 / -1;
    }
}