Responsive meet landing page made with flexbox and grid

What challenges did you encounter, and how did you overcome them?

I had problems with getting the hero image to be cropped symmetrically when the viewport got too narrow to fit it. The solution, though, turned out to be fairly simple:

• give image max-width: none
• horizontally center the image within its container
• horizontally center the container itself on the page
• apply overflow: hidden to the container

.header {
    display: flex;
    flex-direction: column;
    align-items: center; // centers the image horizontally
    // align instead of justify because we set flex direction to column
    
    width: 100%; // image container (header) is as wide as the page so it's already centered
    overflow: hidden; // this must be present

    &__hero-image-tablet {
        height: 160px;
        max-width: none; // we cannot restrict the image width
    }

In the desktop layout, where the hero image is split into two, I used grid with justify-content: center (centered the whole grid within the page) and grid-template-columns: 1fr rem(448px) 1fr. That ensured the heading (middle column) always gets enough space, while the hero images get rest of the page width. If that's not enough to fit them, they both get cropped symmetrically, which is the desired behaviour.

.header {
        display: grid;
        grid-template-columns: 1fr rem(448px) 1fr; // gives images only leftover space
        justify-items: center; // centers items within their cells

        justify-content: center; // centers the whole grid within the header
        // must be here to crop the images symmetrically

        overflow: hidden; // must be included also

        &__hero-image-left, &__hero-image-right {
            max-width: none; // again, we cannot restrict width of the images
            grid-row: 2;
        }

        // Other grid items here
    }

What specific areas of your project would you like help with?

Despite trying different text-wrap options, I couldn't get some texts to wrap as they do in the design.

For example in the desktop layout, the heading "Smarter meetings, all in one place" should wrap after "all" on 1440p screen width but in my solution it wraps after "in" or after "meetings" in Firefox.

If you know any tricks for getting the text to wrap as you want it to, I'd really appreciate if you shared them.

Any feedback regarding other aspects of the solution is welcome too, of course!