.breadcrumb-section {
    padding: 1rem;
}

pre {
    /*
     * Style it the same as the <code> tag, since highlight.js does not style
     * backgrounds of <pre> tags but bulma does, resulting in a weird off-white
     * border.
     */
    background-color: #282c34;
}

.panel .panel-heading {
    /*
     * Remove whitespace between the panel heading and the first item in a panel,
     * since it makes the first panel item taller than the others.
     */
    margin-bottom: 0 !important
}

.event-gallery .card {
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.event-gallery .card img {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

@media (min-width: 700px) {
    .scheduled-events .media-left {
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .previous-events .media-left {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

/* CSS-only Masonry layout:
 * https://tobiasahlin.com/blog/masonry-with-css/
 *
 * Adapted for responsiveness:
 * - Mobile   (<=700px)   No columns at all
 * - Tablets  (700~900px) Two columns Masonry
 * - Desktop+ (>=900px)   Three columns Masonry
 */
@media (min-width: 700px) {
    .event-gallery {
        display: flex;
        flex-flow: column wrap;
        align-content: space-between;
    }

    @media (min-width: 900px) {
        /* 3 columns */
        .event-gallery {
            /* Required. Must be only slightly taller than the tallest column */
            height: 70rem;
        }

        .event-gallery .card {
            width: calc(33% - 1rem);
        }

        /* Reorder vertically */
        .event-gallery .card:nth-child(3n+1) { order: 1; }
        .event-gallery .card:nth-child(3n+2) { order: 2; }
        .event-gallery .card:nth-child(3n)   { order: 3; }

        /* 2 line breaks to force new columns, for each gap between the three columns. */
        .event-gallery::before, .event-gallery::after {
            content: "";
            flex-basis: 100%;
            width: 0;
            order: 2;
        }
    }

    @media (max-width: 900px) {
        /* 2 columns */
        .event-gallery {
            height: 90rem;
        }

        .event-gallery .card {
            width: calc(50% - 1rem);
        }

        .event-gallery .card:nth-child(2n+1) { order: 1; }
        .event-gallery .card:nth-child(2n)   { order: 2; }

        /* 1 line break to force a new column, for the gap between the two columns. */
        .event-gallery::before {
            content: "";
            flex-basis: 100%;
            width: 0;
            order: 1;
        }
    }
}