.header-content .how-to-build,
.header-content .drought-tolerant {
    position: relative;
}

.header-content .how-to-build img,
.header-content .drought-tolerant img {
    position: absolute;
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    top: 0;
    left: 0;
    image-rendering: -webkit-optimize-contrast;
}

/* Reduce header height for blog pages to minimise upscaling of smaller images */
body:not(.index) .header-content .how-to-build,
body:not(.index) .header-content .drought-tolerant {
    height: 220px;
}

@media (min-width: 768px) {
    body:not(.index) .header-content .how-to-build,
    body:not(.index) .header-content .drought-tolerant {
        height: 280px;
    }
}