.layout-container {
    width: fit-content;
    margin: 0 auto;
}

.layout-container:has(.one-column-layout) {
    width: 100%;
}

.three-column-layout {
    display: grid;
    grid-template-columns: 224px 688px 256px;
    gap: var(--column-gap);
    padding: 0 1rem;
}

.two-column-layout {
    display: grid;
    grid-template-columns: 224px 688px;
    gap: var(--column-gap);
    padding: 0 1rem;
}

.one-column-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--column-gap);
    width: 100%;
    max-width: 800px;
    padding: 0 1rem;
    margin: 0 auto;
}

.three-column-layout > .column,
.two-column-layout > .column,
.one-column-layout > .column {
    border: 1px solid var(--clr-surface-a20);
    border-radius: 3px;
    background-color: var(--clr-surface-a0);
}

.three-column-layout ~ .site-header .site-title,
.three-column-layout ~ footer {
    width: calc(224px + 688px + 256px + var(--column-gap) * 2 + 2rem);
}

.two-column-layout ~ .site-header .site-title,
.two-column-layout ~ footer {
    width: calc(224px + 688px + var(--column-gap) + 2rem);
}

.one-column-layout ~ .site-header .site-title,
.one-column-layout ~ footer {
    width: 100%;
    max-width: calc(800px + 2rem);
}

.column-center {
    min-width: 0;
    overflow: hidden;
}

.column-content {
    overflow-x: auto;
}

.column-content--center {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    flex-direction: column;
    text-align: center;
    gap: 1rem;
}

.columns {
    display: grid;
    gap: var(--column-gap);
}

.columns--two {
    grid-template-columns: 1fr 1fr;
    margin-block: 1rem;
}

.columns--three {
    grid-template-columns: 1fr 1fr 1fr;
    margin-block: 1rem;
}

.columns--four {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-block: 1rem;
}

.columns > .column > h3 {
    margin: 0;
}

.column--background {
    background-color: var(--clr-surface-a10);
}

.columns .column-content {
    padding: 1rem;
}

.column--limited > .column-content {
    max-height: 250px;
    overflow-y: auto;
}

.title-bar {
    border-bottom: 1px solid var(--clr-surface-a20);
    padding: 4px 4px 4px 8px;
    font-family: var(--font-label);
    font-size: var(--font-size-label);
    background-color: var(--clr-surface-a10);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.controls {
    display: flex;
    gap: 2px;
}

.control-btn {
    cursor: default;
    color: var(--clr-light-a0);
    width: 14px;
    height: 14px;
    border: 1px solid var(--clr-surface-a30);
    border-radius: 2px;
    display: grid;
    place-items: center;
    background-color: var(--clr-surface-a0);
    font-family: var(--font-caption);
    font-size: 8px;
}

.main-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}