.hero
{
    display: block;
    position: relative;
    width: 100%;
    height: var(--sz_hero);
    background-position-x: left;
    background-position-y: top;
    background-size: cover;
    background-repeat: no-repeat;
}
    .hero::before
    {
        content: attr(data-title);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 5%;
        width: 40%;
        color: white;
        font-size: 3em;
        font-family: refrigerator_deluxeregular, sans-serif;
        text-transform: uppercase;
        text-shadow: 1px 1px 5px black, -1px -1px 5px black;
    }

.hero.about { background-image: url('/images/about_hero.png'); }
.hero.home  { background-image: url('/images/home_hero.png'); }
.hero.safety  { background-image: url('/images/safety_hero.png'); }
.hero.services  { background-image: url('/images/services_hero.png'); }
.hero.join_our_team  { background-image: url('/images/join_us_hero.png'); }

@media screen and (max-width: 1024px)
{
    .hero
    {
        background-position-x: center;
        font-weight: bold;
    }
    .hero::before
    {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .hero.about,
    .hero.safety,
    .hero.services,
    .hero.join_our_team
    {
        background-position: right;
        background-size: contain;
        height: 80px;
    }
}