.sidebar {
    width: 12.5rem;
    vertical-align: top;
    float: left;
    clear: left;
    color: white;
}

@media all and (max-width: 60em) {
    /* Inline on narrow screens */
    .sidebar {
        float: none;
        width: auto;
    }
}

.sidebar a {
    color: white;
}

.sidebar__section {
    border: 2px solid #7b291b;
    border-radius: 8px;
    padding: 8px;
    margin: 6px 0;

    /*
     * Transparent gradient layers awkwardly go to "same color with zero alpha" to work
     * around a Safari quirk: https://css-tricks.com/thing-know-gradients-transparent-black/
     */
    background:
        linear-gradient(to bottom, #a2685e 0px, rgba(123, 41, 27, 0) 12px),
        linear-gradient(to top, #a2685e 0px, rgba(123, 41, 27, 0) 12px), #7b291b;
}

.sidebar__section-header {
    margin: 0 0 4px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
    text-align: center;
}

.sidebar__section-body {
    margin: 0;
}