.HomePage .HomeGrid {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-flow: dense;
    grid-gap: var(--spaces);
    gap: var(--spaces);
    margin-bottom: calc(6 * var(--spaces));
  }

@media screen and (min-width: 1024px) {

    .HomePage .HomeGrid {
      grid-template-rows: repeat(20, 65px);
      grid-template-columns: repeat(4, minmax(20%, 1fr));
  }

      .HomePage .HomeGrid > *:nth-child(1) {
        grid-row: span 8;
        grid-column: span 2;
      }

      .HomePage .HomeGrid > *:nth-child(2) {
        grid-row: span 4;
        grid-column: 3;
      }

      .HomePage .HomeGrid > *:nth-child(3) {
        grid-row: span 4;
        grid-column: 4;
      }

      .HomePage .HomeGrid > *:nth-child(4) {
        grid-row: span 6;
        grid-column: 1 / span 2;
      }

      .HomePage .HomeGrid > *:nth-child(5) {
        grid-row: span 10;
        grid-column: 3 / span 2;
      }

      .HomePage .HomeGrid > *:nth-child(6) {
        grid-row: span 6;
        grid-column: 1 / span 2;
      }

      .HomePage .HomeGrid > *:nth-child(7) {
        grid-row: span 6;
        grid-column: 3 / span 2;
      }
    }