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

.hero-with-text--farm {
    background-image: url(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(farm-large.svg);
    }
}

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

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

.hero-with-text--drawings {
    padding-top: 230px;
    background-image: url(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(drawings.svg);
        background-position: center;
    }
}