Cover 14 — aligning elements to the container grid

Cover 14 is a pretty popular Weblium block that lets you upload an image that isn't limited to a 1200px container and touches the very edge of the screen.
However, when using Cover 14 in reverse, with text on the left and images on the right, the text extends beyond the 1200px container, which visually spoils the composition.

This small CSS snippet will be useful for aligning text to the left side and fitting it into a 1200px grid.

The code is universal, for any screen.

How to install:

Copy the code and upload it to the HEAD of the site.

@media (min-width: 1200px) {
  /* Default — Текст справа */
  [data-block-name="cover-14"] .w-grid__item {
    justify-content: left !important;
  }
  /* Revers — Текст зліва */
  [data-block-name="cover-14"] [class*="section--reverse"] .w-section__inner .w-apply-section-paddings {
    padding-left: calc(((100vw - var(--w-grid-gap) / 2 - var(--w-content-container-size)) / 2) + var(--w-content-gutter));
  }
}