/** Define theme variables */
:root {
    /* Brand */
    --color-primary: #002e5d;
    --color-primary-dark: #001f3f;
    --color-accent: #0e62ae;

    /* Text */
    --color-text: #002e5d;
    --color-text-muted: #66758a;
    --color-text-inverse: #ffffff;
    --color-text-heading: #0c589b;
    --color-text-hyperlink: #0e62ae;

    /* Backgrounds */
    --color-bg: #ffffff;
    --color-bg-muted: #ffffff;
    --color-bg-highlight: #eaf3fc;
    --color-bg-hover: #f4f8fc;

    /* Borders */
    --color-border: transparent;
    --color-divider: #e5e5e6;

    /* Application Specific */
    --button-background-color: #002e5d;
    --button-background-color-hover: #001f3f;
    --highlight-background-color: #002e5d;
}

/** Add custom stuff here */

@media (width < 992px) {
    .event-hero {
        border-bottom: 1px solid var(--color-divider);
    }
}