* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  background-color: white;
  color: #202020;
}
.fm-header { text-align: center; margin-bottom: 25px; }
.fm-navigation a { margin: 10px; color: #196fb1; }
h1 { font-size: 28px; }
.fm-layout {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 960px;
  margin: auto;
}
.fm-block {
  padding: 20px;
  text-align: center;
  align-content: center;
  color: white;
  font-size: 40px;
  font-weight: bold;
}
.fm-block-1 { background-color: #79328a; }
.fm-block-2 { background-color: #196fb1; }
.fm-block-3 { background-color: #369bbb; }
.fm-block-4 { background-color: #41985f; }
.fm-block-5 { background-color: #7cbf40; }
.fm-block-6 { background-color: #b4b832; }
.fm-block-7 { background-color: #ffcd2e; }
.fm-block-8 { background-color: #f5842b; }
.fm-block-9 { background-color: #f0412c; }
.fm-block-10 { background-color: #d9407a; }

/* Extra small: one block per row. */
@media only screen and (max-width: 600px) {
  .fm-layout { grid-template-columns: auto; grid-auto-rows: 90px; }
  .fm-block-1 { grid-area: 1 / 1 / span 1 / span 1; }
  .fm-block-2 { grid-area: 2 / 1 / span 1 / span 1; }
  .fm-block-3 { grid-area: 3 / 1 / span 1 / span 1; }
  .fm-block-4 { grid-area: 4 / 1 / span 1 / span 1; }
  .fm-block-5 { grid-area: 5 / 1 / span 1 / span 1; }
  .fm-block-6 { grid-area: 6 / 1 / span 1 / span 1; }
  .fm-block-7 { grid-area: 7 / 1 / span 1 / span 1; }
  .fm-block-8 { grid-area: 8 / 1 / span 1 / span 1; }
  .fm-block-9 { grid-area: 9 / 1 / span 1 / span 1; }
  .fm-block-10 { grid-area: 10 / 1 / span 1 / span 1; }
}

/* Small: same layout as extra small. */
@media only screen and (min-width: 600px) {
  .fm-layout { grid-template-columns: auto; grid-auto-rows: 90px; }
  .fm-block-1 { grid-area: 1 / 1 / span 1 / span 1; }
  .fm-block-2 { grid-area: 2 / 1 / span 1 / span 1; }
  .fm-block-3 { grid-area: 3 / 1 / span 1 / span 1; }
  .fm-block-4 { grid-area: 4 / 1 / span 1 / span 1; }
  .fm-block-5 { grid-area: 5 / 1 / span 1 / span 1; }
  .fm-block-6 { grid-area: 6 / 1 / span 1 / span 1; }
  .fm-block-7 { grid-area: 7 / 1 / span 1 / span 1; }
  .fm-block-8 { grid-area: 8 / 1 / span 1 / span 1; }
  .fm-block-9 { grid-area: 9 / 1 / span 1 / span 1; }
  .fm-block-10 { grid-area: 10 / 1 / span 1 / span 1; }
}

/* Medium / tablet.
   grid-area: row / column / row span / column span; */
@media only screen and (min-width: 768px) {
  .fm-layout-1 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 100px 100px 100px 100px 100px 100px 100px 100px;
  }
  .fm-layout-1 .fm-block-1 { grid-area: 1 / 1 / span 2 / span 6; }
  .fm-layout-1 .fm-block-2 { grid-area: 3 / 1 / span 1 / span 2; }
  .fm-layout-1 .fm-block-3 { grid-area: 3 / 3 / span 1 / span 2; }
  .fm-layout-1 .fm-block-4 { grid-area: 3 / 5 / span 1 / span 2; }
  .fm-layout-1 .fm-block-5 { grid-area: 4 / 1 / span 2 / span 4; }
  .fm-layout-1 .fm-block-6 { grid-area: 4 / 5 / span 1 / span 2; }
  .fm-layout-1 .fm-block-7 { grid-area: 5 / 5 / span 1 / span 2; }
  .fm-layout-1 .fm-block-8 { grid-area: 6 / 1 / span 1 / span 3; }
  .fm-layout-1 .fm-block-9 { grid-area: 6 / 4 / span 1 / span 3; }
  .fm-layout-1 .fm-block-10 { grid-area: 7 / 1 / span 2 / span 6; }
  .fm-layout-2 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 100px 100px 100px 100px 100px 100px;
  }
  .fm-layout-2 .fm-block-1 { grid-area: 1 / 1 / span 1 / span 6; }
  .fm-layout-2 .fm-block-2 { grid-area: 2 / 1 / span 1 / span 3; }
  .fm-layout-2 .fm-block-3 { grid-area: 2 / 4 / span 1 / span 3; }
  .fm-layout-2 .fm-block-4 { grid-area: 3 / 1 / span 1 / span 3; }
  .fm-layout-2 .fm-block-5 { grid-area: 3 / 4 / span 1 / span 3; }
  .fm-layout-2 .fm-block-6 { grid-area: 4 / 1 / span 1 / span 6; }
  .fm-layout-2 .fm-block-7 { grid-area: 5 / 1 / span 1 / span 2; }
  .fm-layout-2 .fm-block-8 { grid-area: 5 / 3 / span 1 / span 2; }
  .fm-layout-2 .fm-block-9 { grid-area: 5 / 5 / span 1 / span 2; }
  .fm-layout-2 .fm-block-10 { grid-area: 6 / 1 / span 1 / span 6; }
}

/* Large / desktop.
   grid-area: row / column / row span / column span; */
@media only screen and (min-width: 992px) {
  .fm-layout-1 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 110px 110px 110px 110px 110px;
  }
  .fm-layout-1 .fm-block-1 { grid-area: 1 / 1 / span 1 / span 12; }
  .fm-layout-1 .fm-block-2 { grid-area: 2 / 1 / span 1 / span 6; }
  .fm-layout-1 .fm-block-3 { grid-area: 2 / 7 / span 1 / span 6; }
  .fm-layout-1 .fm-block-4 { grid-area: 3 / 1 / span 2 / span 12; }
  .fm-layout-1 .fm-block-5 { grid-area: 5 / 1 / span 1 / span 4; }
  .fm-layout-1 .fm-block-6 { grid-area: 5 / 5 / span 1 / span 4; }
  .fm-layout-1 .fm-block-7 { grid-area: 5 / 9 / span 1 / span 4; }
  .fm-layout-1 .fm-block-8 { grid-area: 1 / 13 / span 1 / span 6; }
  .fm-layout-1 .fm-block-9 { grid-area: 2 / 13 / span 3 / span 6; }
  .fm-layout-1 .fm-block-10 { grid-area: 5 / 13 / span 1 / span 6; }
  .fm-layout-2 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 36px 36px 36px 36px 36px 36px 36px 36px 36px 36px 36px 36px;
  }
  .fm-layout-2 .fm-block-1 { grid-area: 1 / 1 / span 3 / span 4; }
  .fm-layout-2 .fm-block-2 { grid-area: 4 / 1 / span 3 / span 4; }
  .fm-layout-2 .fm-block-3 { grid-area: 7 / 1 / span 3 / span 4; }
  .fm-layout-2 .fm-block-4 { grid-area: 10 / 1 / span 3 / span 4; }
  .fm-layout-2 .fm-block-5 { grid-area: 1 / 5 / span 4 / span 4; }
  .fm-layout-2 .fm-block-6 { grid-area: 5 / 5 / span 4 / span 4; }
  .fm-layout-2 .fm-block-7 { grid-area: 9 / 5 / span 4 / span 4; }
  .fm-layout-2 .fm-block-8 { grid-area: 1 / 9 / span 3 / span 4; }
  .fm-layout-2 .fm-block-9 { grid-area: 4 / 9 / span 6 / span 4; }
  .fm-layout-2 .fm-block-10 { grid-area: 10 / 9 / span 3 / span 4; }
}