.how-it-works__logo {
    display: block;
    font-size: 0;
    line-height: 0;
    margin: 0 -6px;
    position: relative;
    z-index: 2
}

.how-it-works__logo img {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%
}

.how-it-works__title {
    margin-top: -8px;
    position: relative;
    z-index: 5
}

.how-it-works__list {
    margin: 32px auto 0;
    max-width: 770px;
    position: relative
}

@media only screen and (min-width:48em) {
    .how-it-works__title {
        margin-top: -18px
    }

    .how-it-works__list {
        margin-top: 85px
    }

    .how-it-works__list:before {
        background: transparent url(../img/bg-dots.png) repeat 0 0;
        content: "";
        display: block;
        height: 166px;
        left: -244px;
        position: absolute;
        top: -145px;
        width: 275px;
        z-index: -1
    }

    body.no-js .how-it-works__list:before,
    body.no-webp .how-it-works__list:before {
        background-image: url(../img/bg-dots.png)
    }

    body.webp .how-it-works__list:before {
        background-image: url(../img/bg-dots.webp)
    }
}