/* These classes build out the grid required for the fancy card spread
   layouts. The grids assume half-steps so that we can achieve the overlap
   look. For example, this is the Bigger Picture Check-In spread. The
   numbers in this grid below represent each card position number. You
   can see each position number appears 4 times.

       55
    44 55 66
 33 44    66 77
 33 22    88 77
    22 11 88
       11

 While this is a 5-column and 5-row grid, it requires double that to
 be able to do the overlap. Otherwise, the layout would not have
 the overlap look and there would be gaps:

     5
   4   6
 3       7
   2   8
     1

 The grid breakdown for this spread layout is:
 Position 1: column 3, row 3
 Position 2: column 2, row 2.5
 Position 3: column 1, row 2
 Position 4: column 2, row 1.5
 Position 5: column 3, row 1
 Position 6: column 4, row 1.5
 Position 7: column 5, row 2
 Position 8: column 4, row 2.5
*/

.grid-container {
  display: grid;
  margin: 0 auto;
  grid-column-gap: .5rem;
  grid-row-gap: .2rem;
  justify-items: center;
  align-items: center;
  width: 600px;
}

@media only screen and (max-width: 768px) {
  .grid-container {
    width: 100%;
  }
}

/* Grid Size Styles */
.grid-container-1-col {
  grid-template-columns: repeat(1, 1fr);
}

.grid-container-2-col {
  grid-template-columns: repeat(4, 1fr);
}

.grid-container-3-col {
  grid-template-columns: repeat(6, 1fr);
}

.grid-container-4-col {
  grid-template-columns: repeat(8, 1fr);
}

.grid-container-5-col {
  grid-template-columns: repeat(10, 1fr);
}

.grid-container-1-row {
  grid-template-rows: repeat(1, 1fr);
}

.grid-container-2-row {
  grid-template-rows: repeat(4, 1fr);
}

.grid-container-3-row {
  grid-template-rows: repeat(6, 1fr);
}

.grid-container-4-row {
  grid-template-rows: repeat(8, 1fr);
}

.grid-container-5-row {
  grid-template-rows: repeat(10, 1fr);
}


/* Card Positioning Styles */
.grid-col-1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

.grid-col-1p5 {
  grid-column-start: 2;
  grid-column-end: 4;
}

.grid-col-2 {
  grid-column-start: 3;
  grid-column-end: 5;
}

.grid-col-2p5 {
  grid-column-start: 4;
  grid-column-end: 6;
}

.grid-col-3 {
  grid-column-start: 5;
  grid-column-end: 7;
}

.grid-col-3p5 {
  grid-column-start: 6;
  grid-column-end: 8;
}

.grid-col-4 {
  grid-column-start: 7;
  grid-column-end: 9;
}

.grid-col-4p5 {
  grid-column-start: 8;
  grid-column-end: 10;
}

.grid-col-5 {
  grid-column-start: 9;
  grid-column-end: 11;
}

.grid-row-1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

.grid-row-1p5 {
  grid-row-start: 2;
  grid-row-end: 4;
}

.grid-row-2 {
  grid-row-start: 3;
  grid-row-end: 5;
}

.grid-row-2p5 {
  grid-row-start: 4;
  grid-row-end: 6;
}

.grid-row-3 {
  grid-row-start: 5;
  grid-row-end: 7;
}

.grid-row-3p5 {
  grid-row-start: 6;
  grid-row-end: 8;
}

.grid-row-4 {
  grid-row-start: 7;
  grid-row-end: 9;
}

.grid-row-4p5 {
  grid-row-start: 8;
  grid-row-end: 10;
}

.grid-row-5 {
  grid-row-start: 9;
  grid-row-end: 11;
}