.CornflowerBlue {
  background: CornflowerBlue;
  height: 50px;
}
.CadetBlue {
  background: CadetBlue;
  height: 50px;
}
.Aquamarine {
  background: Aquamarine;
  height: 50px;
}
.Aqua {
  background: Aqua;
  height: 50px;
}
.LightCyan {
  background: LightCyan;
  height: 50px;
}
.LightSteelBlue {
  background: LightSteelBlue;
  height: 50px;
}
@media only screen and (max-width: 479px) {
  * {
    background-color: black;
  }
  [custom-layout="6 6"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="3 3 3 3"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 4 4"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 4 2 2"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 2 4 4"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 2 2 4"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 4 4 2"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="3 9"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="9 3"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 8"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="5 7"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="7 5"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="8 4"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 8 2"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 2 8"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="8 2 2"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 4 3 3"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 2 3 3"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="3 7 2"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="3 2 7"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 3 7"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 7 3"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="7 2 3"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="7 3 2"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 4 6"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 6 4"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="6 2 4"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="6 4 2"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 2 6"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 6 2"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="3"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="6"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="8"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="9"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
  * {
    background-color: PaleGreen;
  }
  [custom-layout="6 6"] {
    display: grid;
    grid-template-columns:  6fr 6fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="3 3 3 3"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 4 4"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 4 2 2"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 2 4 4"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 2 2 4"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 4 4 2"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="3 9"] {
    display: grid;
    grid-template-columns:  3fr 9fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="9 3"] {
    display: grid;
    grid-template-columns:  9fr 3fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 8"] {
    display: grid;
    grid-template-columns:  4fr 8fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="5 7"] {
    display: grid;
    grid-template-columns:  5fr 7fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="7 5"] {
    display: grid;
    grid-template-columns:  7fr 5fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="8 4"] {
    display: grid;
    grid-template-columns:  8fr 4fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 8 2"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 2 8"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="8 2 2"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 4 3 3"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 2 3 3"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="3 7 2"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="3 2 7"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 3 7"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 7 3"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="7 2 3"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="7 3 2"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 4 6"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 6 4"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="6 2 4"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="6 4 2"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 2 6"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 6 2"] {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="3"] {
    display: grid;
    grid-template-columns:  30%;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4"] {
    display: grid;
    grid-template-columns:  40%;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="6"] {
    display: grid;
    grid-template-columns:  60%;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="8"] {
    display: grid;
    grid-template-columns:  80%;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="9"] {
    display: grid;
    grid-template-columns:  90%;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
}
@media only screen and (min-width: 767px) {
  * {
    background-color: black;
  }
  [custom-layout="6 6"] {
    display: grid;
    grid-template-columns:  6fr 6fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="3 3 3 3"] {
    display: grid;
    grid-template-columns:  3fr 3fr 3fr 3fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 4 4"] {
    display: grid;
    grid-template-columns:  4fr 4fr 4fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 4 2 2"] {
    display: grid;
    grid-template-columns:  4fr 4fr 2fr 2fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 2 4 4"] {
    display: grid;
    grid-template-columns:  2fr 2fr 4fr 4fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 2 2 4"] {
    display: grid;
    grid-template-columns:  4fr 2fr 2fr 4fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 4 4 2"] {
    display: grid;
    grid-template-columns:  2fr 4fr 4fr 2fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="3 9"] {
    display: grid;
    grid-template-columns:  3fr 9fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="9 3"] {
    display: grid;
    grid-template-columns:  9fr 3fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 8"] {
    display: grid;
    grid-template-columns:  4fr 8fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="5 7"] {
    display: grid;
    grid-template-columns:  5fr 7fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="7 5"] {
    display: grid;
    grid-template-columns:  7fr 5fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="8 4"] {
    display: grid;
    grid-template-columns:  8fr 4fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 8 2"] {
    display: grid;
    grid-template-columns:  2fr 8fr 2fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 2 8"] {
    display: grid;
    grid-template-columns:  2fr 2fr 8fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="8 2 2"] {
    display: grid;
    grid-template-columns:  8fr 2fr 2fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 4 3 3"] {
    display: grid;
    grid-template-columns:  2fr 4fr 3fr 3fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 2 3 3"] {
    display: grid;
    grid-template-columns:  4fr 2fr 3fr 3fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="3 7 2"] {
    display: grid;
    grid-template-columns:  3fr 7fr 2fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="3 2 7"] {
    display: grid;
    grid-template-columns:  3fr 2fr 7fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 3 7"] {
    display: grid;
    grid-template-columns:  2fr 3fr 7fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 7 3"] {
    display: grid;
    grid-template-columns:  2fr 7fr 3fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="7 2 3"] {
    display: grid;
    grid-template-columns:  7fr 2fr 3fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="7 3 2"] {
    display: grid;
    grid-template-columns:  7fr 3fr 2fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 4 6"] {
    display: grid;
    grid-template-columns:  2fr 4fr 6fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="2 6 4"] {
    display: grid;
    grid-template-columns:  2fr 6fr 4fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="6 2 4"] {
    display: grid;
    grid-template-columns:  6fr 2fr 4fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="6 4 2"] {
    display: grid;
    grid-template-columns:  6fr 4fr 2fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 2 6"] {
    display: grid;
    grid-template-columns:  4fr 2fr 6fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4 6 2"] {
    display: grid;
    grid-template-columns:  4fr 6fr 2fr;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="3"] {
    display: grid;
    grid-template-columns:  30%;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="4"] {
    display: grid;
    grid-template-columns:  40%;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="6"] {
    display: grid;
    grid-template-columns:  60%;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="8"] {
    display: grid;
    grid-template-columns:  80%;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
  [custom-layout="9"] {
    display: grid;
    grid-template-columns:  90%;
    border: 2px solid black;
    margin-bottom: 0.5em;
  }
}