.frame
{
    color: var(--font-color);
    background-color: var(--bg-color-base);
    padding: var(--border-width);
    border: 4px outset color-mix(in lab, var(--border-color), #000 10% );
    border-top-color: color-mix(in lab, var(--border-color), #FFFFFF 20% );
    border-bottom-color: color-mix(in lab, var(--border-color), #000000 20% );
    box-shadow: 0px 0px 3px 0px #201815;
    margin: 0 auto;
}
.frame .two-columns
{
    display: flex;
    flex-direction: column;
}
.frame .two-columns > *:first-child
{
    flex-grow: 1;
}
.frame .two-columns > *:last-child
{
    width: max-content;
}
.frame-header
{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}
.frame-content
{
    color: var(--font-color-content);
    background-color: var(--bg-color-light);
    border: 4px inset var(--border-color);
    border-top-color: color-mix(in lab, var(--border-color), #000000 20% );
    border-bottom-color: color-mix(in lab, var(--border-color), #FFFFFF 20% );
    padding: var(--content-padding);
    min-height: 128px;
}
.frame-footer
{
    background-color: var(--bg-color-dark);
    border: 4px inset var(--border-color);
    border-top-color: color-mix(in lab, var(--border-color), #000000 20% );
    border-bottom-color: color-mix(in lab, var(--border-color), #FFFFFF 20% );
    padding: var(--content-padding);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
.frame > .frame-content:not(:last-of-type),
.frame .two-columns:not(:last-of-type),
.frame-footer:not(:last-of-type)
{
    margin-bottom: calc(var(--border-width) * 1.5);
}
.grid-inlet
{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.frame-inlet
{
    color: var(--font-color-content);
    background-color: var(--bg-color-base);
    border: 4px inset var(--border-color);
    border-top-color: color-mix(in lab, var(--border-color), #FFF 50% );
    border-bottom-color: color-mix(in lab, var(--border-color), #000 80% );
    padding: var(--content-padding);
}