.layout {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    grid-template-areas:
        "header highlights highlights"
        "left   content    right";
    gap: 24px;
    position: relative
}

.content {
    grid-area: content;
    min-width: 0
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.sidebar-left {
    grid-area: left
}

.sidebar-right {
    grid-area: right
}

.sb-sticky {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

@media (max-width: 1400px) {
    #highlight { display: none }
}

@media (max-width: 1100px) {
    .header-left { flex-wrap: wrap; height: auto }
    .cal { align-self: stretch; height: auto; min-height: 90px }
}

@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "left"
            "content"
    }
    .sidebar-right { display: none }
    .sb-alerts, thead th { position: static !important }
    .sb-sticky { position: static }
}