Cover 14 — вирівнювання елементів по сітці контейнера

Cover 14 є досить популярним Weblium блоком, який дозволяє завантажити зображення, яке не обмежене контейнером у 1200px та торкається до самої границі екрана.
Але при використанні Cover 14 у реверсі, коли текст зліва, а зображення справа, текст виходить за рамки контейнера 1200px, що візуально звісно псує композицію.

Цей маленький CSS сніпет буде корисним для того, щоб вирівняти текст по лівій стороні, вписати його в рамки сітки 1200px.

Код універсальний, для будь-якого екрану.

Як встановити:

Скопіюйте код, та завантажте в HEAD сайту.

@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));
  }
}