.hero {
    background-color: #008475;
    background-image: url('assets/hero-adult.png'), url('assets/hero-puppy.png'), url('assets/hero-cat.png');
    background-position: left top, center top, right top;
    background-size: calc(100% / 3) 100%;
    background-repeat: no-repeat;
}

.hero .product::after {
    content: none;
}

@media (max-width: 767px) {
    .hero {
        background: #323e41;
    }

    .hero .product {
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .hero .adult {
        background-image: url('assets/hero-adult.png');
    }

    .hero .puppy {
        background-image: url('assets/hero-puppy.png');
    }

    .hero .cat {
        background-image: url('assets/hero-cat.png');
    }
}