.hero-with-text {
    background-size: 100%;
    background-repeat: no-repeat;
}

.hero-with-text--farm {
    background-image: url(../svg/farm.svg);
    background-position: bottom;
}

.hero-with-text--farm .rte {
    margin-bottom: 64px;
}

@media screen and (min-width: 750px) {
    .hero-with-text--farm .rte {
        margin-bottom: 148px;
    }
}

@media screen and (min-width: 1280px) {
    .hero-with-text--farm {
        background-image: url(../svg/farm-large.svg);
    }
}

.hero-with-text--clouds {
    background-image: url(../svg/clouds-2.svg);
}

.hero-with-text--cycling {
    background-image: url(../cycling.html);
}

.hero-with-text--drawings {
    padding-top: 230px;
    background-image: url(../svg/drawings-mobile.svg);
    background-position: top;
}

@media screen and (min-width: 750px) {
    .hero-with-text--drawings {
        padding-top: 0;
        background-size: contain;
        background-image: url(../svg/drawings.svg);
        background-position: center;
    }
}