/* More layout extensions for slides:


- two-columns, eg <ul class='two-columns'>
- side-by- side, eg
   <ul class='side-by-side-grid'>
    <li></li/>
    <li></li>
  </ul>

  The grid is 400px + 400px. To change, do as follow:
  <div class='side-by-side-grid'>
    <div style='width: 500px'></div>
    <div style='width: 500px'></div>
  </div>

- two-by-two-grid, eg
  <ul class='two-by-two-grid'>
    <li/>
    <li/>
    <li/>
    <li/>
  </ul>

Don't use img elements as direct children for the grid. Encapsulate them in a div.

  <div class='side-by-side-grid'>
    <ul></ul>
    <div><img /></div>
  </div>

*/


/* one item on 2 columns */
.two-columns {
  column-count: 2; column-gap: 40px;
}

/* 2 items, side by side */

.side-by-side-grid {
  display: grid;
  grid-gap: 20px;
}

.side-by-side-grid > * {
  display: block;
  height: 400px;
  width: 400px;
}
.side-by-side-grid > *:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 1;
}
.side-by-side-grid > *:nth-child(2) {
  grid-column: 2 / 2;
  grid-row: 1 / 1;
}

/* 2x2 grid with color scheme */

.two-by-two-grid {
  display: grid;
  grid-gap: 20px;
}

.two-by-two-grid > * {
  display: block;
  height: 200px;
  width: 400px;
}
.two-by-two-grid > *:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.two-by-two-grid > *:nth-child(2) {
  grid-column: 1 / 2;
  grid-row: 2 / 2;
}
.two-by-two-grid > *:nth-child(3) {
  grid-column: 2 / 2;
  grid-row: 1 / 2;
}
.two-by-two-grid > *:nth-child(4) {
  grid-column: 2 / 2;
  grid-row: 2 / 2;
}