.c-splash-hero {
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    max-width: $MAXIMUM_PAGE_WIDTH + $DESKTOP_SIDE_GUTTER*2;

    &:hover {
        .c-splash-hero__title span {
            box-shadow: inset 0 -3px 0 0 $azalea;
        }
    }

    .c-splash-hero__link:focus ~ * .c-splash-hero__title span {
        box-shadow: inset 0 -3px 0 0 $azalea;
    }

    @include at-x-large-size {
        padding-left: $DESKTOP_SIDE_GUTTER;
        padding-right: $DESKTOP_SIDE_GUTTER;
        margin-top: 40px;
    }
}

.c-splash-hero-wrapper {
    box-shadow: 20px 20px 0px 0px $azalea;
    max-width: $MAXIMUM_PAGE_WIDTH;
    width: 100%;
}

@include at-medium-size {
    .c-splash-hero-wrapper {
        display: table;
    }
    .c-splash-hero__images,
    .c-splash-hero__contents {
        display: table-cell;
        vertical-align: middle;
        width: 50%;
    }
}

.c-splash-hero__images {
    background-color: $white;
    overflow: hidden;
}
.c-splash-hero__images--multiple {
    @include at-medium-size {
        font-size: 0;

        .c-splash-hero__image {
            display: inline-block;
            width: 50%;
        }

        :nth-child(n + 3){
            display: none;
        }
    }
}

.c-splash-hero__image {}

.c-splash-hero__image-wrapper {
    background-color: $pampas;
    padding-top: 100%;
}

.c-splash-hero__contents {
    background-color: $white;
    padding: 20px;
    position: relative;

    @include at-medium-size {
        padding: 30px 40px;
    }

    @include at-x-large-size {
        padding: 30px 60px 30px 40px;
    }
}

.c-splash-hero__tag {
    @include font("GRAPHIK", 10px, 'SEMI BOLD', 10px);
    background: $azalea;
    color: $astronaut;
    left: 0;
    letter-spacing: 1.5px;
    padding: 14px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    transform: translateY(-100%);

    @include at-medium-size {
        background-color: transparent;
        left: initial;
        margin: 0 0 20px 0;
        padding: 0;
        position: relative;
        top: initial;
        transform: translateY(0);
    }
}

.c-splash-hero__title {
    @include font("MILLER_DISPLAY", 23px, 'SEMI BOLD', 28px);
    color: $dune;
    margin: 0 0 10px 0;

    @include at-medium-size {
        @include font-size(35px);
        @include line-height(38px);
    }

    @include at-x-large-size {
        @include font-size(40px);
        @include line-height(45px);
        margin: 0 0 30px 0;
    }
}

.c-splash-hero__teaser {
    @include font("GRAPHIK", 14px, 'SEMI BOLD', 18px);
    color: $dune;
    display: block;
    letter-spacing: 0px;
    margin: 0 0 30px 0;
}

.c-splash-hero__byline {
    @include font("GRAPHIK", 10px, null, 10px);
    color: $dune;
    letter-spacing: 1.5px;
    margin: 0 0 6px 0;
    text-transform: uppercase;

    @include at-medium-size {
        bottom: 50px;
        position: absolute;
    }
}

.c-splash-hero__meta {
    @include at-medium-size {
        bottom: 40px;
        position: absolute;
    }
}

.c-splash-hero__meta-item {
    @include font("GRAPHIK", 10px, null, 10px);
    color: $dune;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.c-splash-hero__meta-item + .c-splash-hero__meta-item:before {
    background-color: $azalea;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 3px;
    margin: 1px 4px;
    width: 3px;
}