.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
}

.sponsor {
    border-radius: .1rem;
    padding: .3rem;
}

.sponsor img {
    display: block;
    margin: auto;
}

.box .sponsor {
    margin-bottom: 1rem;
}

.event-gallery .date-icon, #main-section .date-icon {
    margin-left: -.25rem;
}

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

/* We are using bulma cards as boxes here to take advantage of the card's
 * header image component */
.event-gallery .card img {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/* Custom component: A colored line at the top of a card that can be styled
 * with bulma's has-background-* classes.*/
.card .colored-line {
    /* A default color as grey */
    background-color: #C1C1C1;
    height: .3rem;
    display: block;
    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;
    }

    #other-events-section {
        height: 63rem;
    }

    #other-events-section .box {
        width: calc(50% - 1rem);
    }

    #other-events-section .box:nth-child(2n+1) { order: 1; }
    #other-events-section .box:nth-child(2n)   { order: 2; }

    #other-events-section::before {
        content: "";
        flex-basis: 100%;
        width: 0;
        order: 2;
    }

    @media (min-width: 900px) {
        /* 3 columns */
        #main-events-section {
            /* Required. Must be only slightly taller than the tallest column */
            height: 68rem;
        }

        #main-events-section .card {
            width: calc(33% - 1rem);
        }

        /* Reorder vertically */
        #main-events-section .card:nth-child(3n+1) { order: 1; }
        #main-events-section .card:nth-child(3n+2) { order: 2; }
        #main-events-section .card:nth-child(3n)   { order: 3; }

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

    @media (max-width: 900px) {
        /* 2 columns */
        #main-events-section {
            height: 96rem;
        }

        #other-events-section {
            height: 83rem;
        }

        #main-events-section .card {
            width: calc(50% - 1rem);
        }

        #main-events-section .card:nth-child(2n+1) { order: 1; }
        #main-events-section .card:nth-child(2n)   { order: 2; }

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