.container {
  display: grid; /* grid | inline-grid */
  grid-template-columns: auto;
    /* e.g. 
        1fr 1fr
        minmax(10px, 1fr) 3fr
        repeat(5, 1fr)
        50px auto 100px 1fr
    */
  grid-template-rows: auto;
    /* e.g. 
        min-content 1fr min-content
        100px 1fr max-content
    */
  grid-column-gap: var(--gutter);


  width: 90%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;

}

.container-2 { grid-template-columns: 1fr; }
.container-3 { grid-template-columns: 1fr; }
.container-4 { grid-template-columns: 1fr; }
.container-5 { grid-template-columns: 1fr; }
.container-1-2 { grid-template-columns: 1fr; }
.container-1-3 { grid-template-columns: 1fr; }
.container-1-4 { grid-template-columns: 1fr; }
.container-2-1 { grid-template-columns: 1fr; }
.container-3-1 { grid-template-columns: 1fr; }
.container-4-1 { grid-template-columns: 1fr; }

/**
 * Breakpoints
 * tablet-portrait: 480px;
 * tablet-landscape: 768px;
 * desktop-small: 1024px;
 * desktop-large: 1400px;
*/
/* Breakpoint: tablet, portrait */
@media only screen and (min-width: 480px) {
  .container-2 { grid-template-columns: repeat(2, 1fr); }
  .container-4 { grid-template-columns: repeat(2, 1fr); }
  .container-5 { grid-template-columns: repeat(2, 1fr); }
  .container-5 .item:first-child {
    grid-column: 1 / -1;
  }
}
/* Breakpoint: mid tablet */
@media only screen and (min-width: 480px) {
  .container-1-2 { grid-template-columns: repeat(2, 1fr); }
  .container-1-3 { grid-template-columns: 1fr 2fr; }
  .container-2-1 { grid-template-columns: repeat(2, 1fr); }
  .container-3-1 { grid-template-columns: 2fr 1fr; }
}
/* Breakpoint: tablet, landscape */
@media only screen and (min-width: 768px) {
  .container-3 { grid-template-columns: repeat(3, 1fr); }
  .container-1-2 { grid-template-columns: 1fr 2fr; }
  .container-1-3 { grid-template-columns: 1fr 3fr; }
  .container-1-4 { grid-template-columns: 1fr 3fr; }
  .container-2-1 { grid-template-columns: 2fr 1fr; }
  .container-3-1 { grid-template-columns: 3fr 1fr; }
  .container-4-1 { grid-template-columns: 3fr 1fr; }
  .container-5 { grid-template-columns: repeat(3, 1fr); }
  .container-5 .item:nth-child(1) { grid-column: 1 / 3; }
  .container-5 .item:nth-child(2) { grid-column: 3 / 3; }
}
/* Breakpoint: desktop, small */
@media only screen and (min-width: 1024px) {
  .container-4 { grid-template-columns: repeat(4, 1fr); }
  .container-5 { grid-template-columns: repeat(5, 1fr); }
  .container-5 .item:nth-child(1) { grid-column: unset; }
  .container-5 .item:nth-child(2) { grid-column: unset; }
  .container-1-4 { grid-template-columns: 1fr 4fr; }
  .container-4-1 { grid-template-columns: 4fr 1fr; }
}

.container .item {
  position: relative;
  padding: var(--gutter) 0 0;
}
.container .item.background {
  padding: var(--gutter) var(--gutter) 0 var(--gutter);
  margin-bottom: var(--gutter);
}

.header h1 {
  padding-bottom: var(--gutter);
}