The first two sections

The first two sections don't require any new CSS.

For the hero, we only need to update the content, and with the two-column section under it, we have everything we need already.

One difference from this two column section and the ones on the other page is it's in a narrower column, but that doesn't matter because the .equal-columns will work wherever it's used used.

A case for container queries

One issue with the .equal-columns that we've created is, if we placed them in, say a .wrapper--extra-narrow, the columns might potentially be too narrow at some screen sizes.

We could swap out the @media for an @container, which would solve this, but it does come with some trade offs:

• Without a defined container, @container doesn't work, so we also would need to define containers.
• We'd have less "consistent" break points (though that is sort of the point in using them).

With the layout we are creating here, I'm happy to leave these as media queries, but if you'd prefer to use container queries, you'd need the following as well:

.wrapper {
  /* other styles */
  container-type: inline-size;
}