/*
 * The map on an event page.
 *
 * This used to be `html, body, #map { height: 100%; width: 100vw }` with the body
 * margin zeroed - a full-bleed map for a page that had no chrome. The page now sits
 * inside the site header and footer like every other, and 100vw on an element inside
 * a padded container is wider than its parent, which is how you get a horizontal
 * scrollbar on the whole document.
 */
#map {
    height: 30rem;
    max-width: 100%;
    border-radius: 0.5rem;
    border: 1px solid #ccc;
}
@media (max-width: 40rem) {
    #map { height: 20rem; }
}