/* 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>

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


*/


/* 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;
  border-radius: 5px;
  padding: 20px;
  font-size:80%;
  line-height: 150%;
  height: 400px;
  width: 400px;
}
.side-by-side-grid > *:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 1;
  background-color: #6b5b95;
  color: white;
}
.side-by-side-grid > *:nth-child(2) {
  grid-column: 2 / 2;
  grid-row: 1 / 1;
  background-color: #feb236;
  color: black;
}

/* 2x2 grid with color scheme */

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

.two-by-two-grid > * {
  display: block;
  border-radius: 5px;
  padding: 20px;
  font-size:80%;
  line-height: 150%;
  height: 200px;
  width: 400px;
}
.two-by-two-grid > *:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background-color: #6b5b95;
  color: white;
}
.two-by-two-grid > *:nth-child(2) {
  grid-column: 1 / 2;
  grid-row: 2 / 2;
  background-color: #feb236;
  color: black;
}
.two-by-two-grid > *:nth-child(3) {
  grid-column: 2 / 2;
  grid-row: 1 / 2;
  background-color: #d64161;
  color: white;
}
.two-by-two-grid > *:nth-child(4) {
  grid-column: 2 / 2;
  grid-row: 2 / 2;
  background-color: #ff7b25;
  color: white;
}