.media-gallery {
  --gridWidth: 100vw;
  --gridGap: var(--space-4); }
  .media-gallery .headercontainer,
  .media-gallery .ctacontainer {
    margin-left: auto;
    margin-right: auto;
    width: calc(var(--gridWidth) - (var(--gridGap)*4)); }
    @media screen and (min-width: 1152px) {
      .media-gallery .headercontainer,
      .media-gallery .ctacontainer {
        width: 90%; } }

.mg__grid {
  display: grid;
  grid-gap: var(--gridGap);
  width: calc(var(--gridWidth) - (var(--gridGap)*4));
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    .mg__grid {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(6, auto); } }
  @media screen and (min-width: 1152px) {
    .mg__grid {
      width: 90%;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(4, auto); }
      .mg__grid .mg__grid--c1x1 {
        grid-column: 1 / 2; }
      .mg__grid .mg__grid--c1x2 {
        grid-column: 1 / 3; }
      .mg__grid .mg__grid--c1x3 {
        grid-column: 1 / -1; }
      .mg__grid .mg__grid--c2x1 {
        grid-column: 2 / 3; }
      .mg__grid .mg__grid--c2x2,
      .mg__grid .mg__grid--c2x3 {
        grid-column: 2 / -1; }
      .mg__grid .mg__grid--c3x1,
      .mg__grid .mg__grid--c3x2,
      .mg__grid .mg__grid--c3x3 {
        grid-column: -2 / -1; }
      .mg__grid .mg__grid--r1x1 {
        grid-row: 1 / 2; }
      .mg__grid .mg__grid--r1x2 {
        grid-row: 1 / 3; }
      .mg__grid .mg__grid--r1x3 {
        grid-row: 1 / 4; }
      .mg__grid .mg__grid--r1x4 {
        grid-row: 1 / -1; }
      .mg__grid .mg__grid--r2x1 {
        grid-row: 2 / 3; }
      .mg__grid .mg__grid--r2x2 {
        grid-row: 2 / 4; }
      .mg__grid .mg__grid--r2x3,
      .mg__grid .mg__grid--r2x4 {
        grid-row: 2 / -1; }
      .mg__grid .mg__grid--r3x1 {
        grid-row: 3 / 4; }
      .mg__grid .mg__grid--r3x2,
      .mg__grid .mg__grid--r3x3,
      .mg__grid .mg__grid--r3x4 {
        grid-row: 3 / -1; }
      .mg__grid .mg__grid--r4x1,
      .mg__grid .mg__grid--r4x2,
      .mg__grid .mg__grid--r4x3,
      .mg__grid .mg__grid--r4x4 {
        grid-row: 4 / -1; } }