Kleine, nach und nach zu erweiternde Liste von nützlichen CSS Angaben:

.c-hero__title {
    max-width: 36rem;
    text-wrap: balance;
}

verhindert, dass einzelene Worte in einer eigenen Zeile stehen. Link

img {
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

ermöglicht es, Bilder, die neben Textblöcken stehen, in der Höhe anzugleichen.