/* --- HERO --- */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--color-brand);
    box-shadow: var(--shadow-overlay);
    color: var(--color-secondary);
}

.hero .logo {
    max-width: 75%;
    width: 23rem;
    height: auto;
}

/* --- HERO: FULL --- */
.hero.full {
    min-height: var(--hero-full-height);
    padding: var(--header-full-height) var(--size-m) var(--size-xl);
}

.hero.full .heading {
    margin: var(--size-s) 0 var(--size-xxl);
}

.hero.full .title {
    font-family: "Arimo", "Helvetica", "Arial", sans-serif;
}

/* --- HERO: COMPACT --- */
.hero.compact {
    justify-content: flex-end;
    padding: var(--header-compact-height) var(--size-m) var(--size-m);
}

/* --- DEVICE: DESKTOP --- */
@media only screen and (hover: hover) and (pointer: fine) {
    /* Only applied to desktop because scrolling on mobile causes
    background position recalculation due to collapsing browser menu. */
    .hero.full {
        background-attachment: fixed;
    }
}

/* --- SCREEN: LARGE --- */
@media (min-width: 1024px) {
    .hero.full {
        padding-bottom: var(--size-xxl);
    }

    .hero.compact {
        height: var(--hero-compact-height);
        padding-bottom: var(--size-xl);
    }
}