/* --- HERO --- */
.hero {
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background-image: url("/images/close-up-of-a-cobbler-working-with-leather.jpg");
    background-color: var(--brand-color);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: var(--overlay-shadow);
    color: var(--secondary-color);
}

.hero .inner {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* --- FULL HEIGHT --- */
.hero.full {
    min-height: var(--hero-height-full-min);
    height: var(--hero-height-full);
}

.hero.full .inner {
    padding: var(--header-height-full) var(--size-m) var(--size-xxl);
}

.hero.full svg {
    max-width: 75%;
    height: auto;
    fill: var(--secondary-color);
}

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

.hero.full .button span {
    margin-right: var(--size-xs);
    font-size: var(--size-l);
    font-weight: normal;
}

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

/* --- COMPACT HEIGHT --- */
.hero.compact {
    height: var(--hero-height-compact);
}

.hero.compact .inner {
    justify-content: flex-end;
    padding: var(--header-height-full) var(--size-m) var(--size-xl);
}

/* --- SMALL SCREEN --- */
@media (max-width: 1023px) {
    .hero.compact {
        height: var(--hero-height-compact-mobile);
    }
    
    .hero.compact .inner {
        padding: var(--header-height-compact) var(--size-m) var(--size-m);
    }
}