<div class="container">
  <div class="card">A card</div>
  <div class="image-container">
    <img src="http://placekitten.com/1200/700" alt="Kitty" class="image">
  </div>
</div>

<div class="overlay-container">
  <div class="overlay">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>

$row-width: 1140px;
$gutter: 30px;
$gap: 20px;
$break: $row-width + 2 * $gutter;
$col-width-post-break: ($row-width - 11 * $gap) / 12;

body {
  margin: 0px;
  padding: 0px;
}

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: $gutter repeat(11, calc((100% - 2 * #{$gutter} - 11 * #{$gap})/12) #{$gap}) calc((100% - 2 * #{$gutter} - 11 * #{$gap})/12) $gutter;
  @media screen and (min-width: #{$break}) {
    grid-template-columns: calc(0.5 * (100% - #{$row-width})) repeat(11, #{$col-width-post-break} #{$gap}) #{$col-width-post-break} calc(0.5 * (100% - #{$row-width}));
  }
}

.overlay-container {
  width: 100%;
  left: 0px;
  top: 0px;
  z-index: 1;
  position: fixed;
  padding-left: $gutter;
  padding-right: $gutter;
}

.overlay {
  max-width: $row-width;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-gap: $gap;
}

.col {
  background: rgba(255, 0, 0, 0.1);
  height: 100vh;
}

.card {
  grid-column: 2/9;
  background: rgba(gray, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-container {
  grid-column: 12/26;
}

.image {
  display: block;
  max-width: 100%;
}