.panel-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--card-gap);
    padding-top: var(--card-gap);
}

.panel-container > section, .panel-container.double > div > section {
    z-index: 2;
}

.panel {
    padding: var(--card-padding);
    background-color: var(--card-background, hsl(var(--b5)));
    backdrop-filter: var(--card-filter, none);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}
.panel.dimmed {
    opacity: 0.5;
    filter: brightness(60%);
    pointer-events: none;
}

.panel-container.double > div {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    gap: var(--card-gap);
}
.panel-container > .main, .main > .panel {
    width: var(--cards-main-width);
}
.panel-container > .sidebar, .sidebar > .panel {
    width: var(--cards-sidebar-width);
}

.main > .panel,
.sidebar > .panel {
    flex: 1;
}

.panel-container > section {
    width: var(--cards-width);
}


.panel-container.double {
    flex-direction: row;
    align-items: stretch;
}