#june-hero {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 0.42864583;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/hero/hero.jpg);
    background-image: -webkit-image-set(url("../images/hero/hero.jpg") 1x,
            url("../images/hero/hero@2x.jpg") 2x);
}
#june-hero .button {
    bottom: 8.6%;
    right: 21.3%;
    width: 20.9%;
    height: 9.3%;
    text-indent: -9999px;
}
@media screen and (max-width: 567px) {
    #june-hero {
        aspect-ratio: 1 / 1.66933333;
        background-image: url(../images/hero/hero-m.jpg);
        background-image: -webkit-image-set(url("../images/hero/hero-m.jpg") 1x,
                url("../images/hero/hero-m@2x.jpg") 2x);
    }
    #june-hero .button {
        bottom: 9%;
        right: 19%;
        width: 63%;
        height: 7%;
    }
}