#how-hero {
    background-image: url('../../images/how-it-works/hero-back.jpg');
    background-image: image-set(url('../../images/how-it-works/hero-back.jpg') 1x, url('../../images/how-it-works/hero-back@2x.jpg') 2x);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 35px 0 55px;
    width: 1280px;
    max-width: calc(100% - 30px);
    margin-top: 48px;
    margin-bottom: 66px;
    border-radius: 15px;
}

#how-hero .title {
    font-size: 3.875em;
    line-height: 1;
    text-wrap-mode: nowrap !important;
    margin-bottom: 25px;
}

#how-hero .title .frog {
    margin-right: -30px;
    margin-bottom: -20px;
}
#how-hero p {
    width: 540px;
    font-size: 18px;
    line-height: 1.444;
    margin-bottom: 20px;
    max-width: 100%;
}
#how-hero .button {
    width: 192px;
    height: 40px;
    border-radius: 20px;
    font-size: 20px;
}

@media screen and (max-width: 567px) {
    #how-hero {
        background-image: url('../../images/how-it-works/hero-back-m.jpg');
        background-image: image-set(url('../../images/how-it-works/hero-back-m.jpg') 1x, url('../../images/how-it-works/hero-back-m@2x.jpg') 2x);
        padding: 26px 0 39px;
        margin-top: 33px;
        margin-bottom: 50px;
        border-radius: 10px;
    }

    #how-hero .title {
        font-size: 2.25em;
        display: flex;
        flex-direction: column;
        margin-bottom: 17px;
        z-index: 1;
    }

    #how-hero .title .frog {
        position: absolute;
        margin: 0;
        width: 90px;
        left: -65px;
        bottom: -12px;
        z-index: -1;
    }
    #how-hero p {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 21px;
    }
    #how-hero .button {
        width: 190px;
        font-size: 20px;
    }
}