.sidebar + .main-content, .main-content + .sidebar, .chart + .chart {
    margin-top: .5rem;
}
@supports (display: grid) {
    .wrapper {
        display: grid;
        grid-gap: .5rem;
        grid-template-columns: 1fr;
        grid-template-areas:
            "sidebar"
            "main-content"
            ;
    }
    .wrapper.no-sidebar {
        grid-template-areas:
            "main-content"
            ;
    }
    .sidebar {
        grid-area: sidebar;
    }
    .main-content {
        grid-area: main-content;
        display: grid;
        grid-gap: .5rem;
        grid-template-columns: 1fr;
    }
    .sidebar + .main-content, .main-content + .sidebar, .chart + .chart {
        margin-top: 0;
    }
    @media screen and (min-width: 50rem) {
        .wrapper {
            grid-template-columns: 20rem 1fr;
            grid-template-areas:
                "sidebar main-content";
        }
        .wrapper.no-sidebar {
            grid-template-columns: 1fr;
            grid-template-areas:
                "main-content"
                ;
        }
    }
}