Кровоточащее изображение или контейнер за пределами точки обзора, все еще используя контейнер с колонками?

Question

Как я могу пролить изображение или контейнер (для цвета фона) к краю области просмотра с одной стороны, в то же время используя сетку столбцов для ссылки на другую сторону и для размещения содержимого внутри?

Я приложил иллюстрацию моего желаемого результата.

Этот ответ похож на , однако мне нужно, чтобы изображение показывалось как можно больше, поэтому я не хочу расширять его дальше, чем необходимо.

Используемая мной разметка похожа на макет начальной загрузки.

.container {
  margin: 0 auto;
  max-width: 1140px}
.container--fluid {
  margin: 0;
  max-width: 100%; 
}

.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 2em;
}

.col--bleed {
  background: lightgray;
  /* margin-right:calc((100vw - 1140px) / 2) */
}

.col__inner {
  padding-left: 15px;
  padding-right: 15px; 
}

HTML-разметка:

<div class="container">
  <div class="row">
    <div class="col-7">
      <div class="col__inner">
        <!-- Content here -->
      </div>
    </div>
    <div class="col-5 col--bleed">
      <div class="col__inner">
        <!-- Content here -->
      </div>
    </div>
  </div>
</div>

Вот пример разметки, которую я буду использовать в codepen.