.grid {
  display: grid;
  width: 100%;
  height: 100%;
}
.col-1 {
  grid-template-columns: 1fr;
}
.col-2 {
  grid-template-columns: 1fr 1fr;
}
.col-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.col-6 {
  grid-template-columns: repeat(6, 1fr);
}
.row-1 {
  grid-template-rows: 1fr;
}
.row-2 {
  grid-template-rows: 1fr 1fr;
}
.row-3 {
  grid-template-rows: 1fr 1fr 1fr;
}
.row-4 {
  grid-template-rows: 1fr 1fr 1fr 1fr;
}
.row-5 {
  grid-template-rows: 25vh 25vh 25vh 25vh 25vh;
}
.row-6 {
  grid-template-rows: 25vh 25vh 25vh 25vh 25vh 25vh;
}
.rows-landing {
  grid-template-rows: 3fr 1fr 3fr;
}
.grid-item {
  border: 1px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  /* z-index: 1000; */
  overflow-y: hidden;
}
.grid-item-square {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}
.flex-col {
  flex-direction: column;
}
.square-2 {
    grid-column: span 2;
    grid-row: span 2;
}
.square-3 {
  grid-column: span 3;
  grid-row: span 3;
}
.square-4 {
  grid-column: span 4;
  grid-row: span 4;
}