.hero {
    position: relative;
    background-color: var(--app-bodyBgColor);
    text-align: center;
    overflow: hidden;
    background-size: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-top: 20px;
}

.hero.has-image-mobile {
    background-position: center 40%;
}

.hero h1 {
    font-weight: 300 !important;
}

@media (min-width: 768px){
    .hero,
    .hero.has-image-mobile {
        padding-top: 60px;
        background-position: center 110%;
    }
}

@media (min-width: 992px){
    .hero,
    .hero.has-image-mobile {
        background-position: center 120%;
    }
}

@media (min-width: 1200px){
    .hero,
    .hero.has-image-mobile {
        background-position: center 180%;
    }
}

@media (min-width: 1440px){
    .hero,
    .hero.has-image-mobile {
        background-position: center;
    }
}

.hero .button{
    background: #56d08a;
}