:root {
    --wood-height: 66px;
    --magnolia-height: 117px;
    --logo-max-width: 169px;
    --logo-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.site-hero {
    position: relative;
    width: 100%;
    height: calc(var(--wood-height) + var(--magnolia-height));
    overflow: visible;
}

.hero-layer {
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-wood {
    width: 100%;
    height: var(--wood-height);
    background-image: url("background.jpg");
    background-position: top center;
    background-size: 100% 1000px;
}

.hero-magnolia {
    height: var(--magnolia-height);
    background-image: url("magnolia-strip.jpg");
    background-size: cover;
    background-position: center top;
}

.hero-layer {
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
}

.hero-logo-link {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    display: inline-block;
}

.hero-logo {
    display: block;
    width: 100%;
    max-width: var(--logo-max-width);
    height: auto;
    filter: drop-shadow(var(--logo-shadow));
}