web/components/TempDesignSystem/Grids/Dynamic/Item/item.module.css

.item {
  margin: 0;
  padding: 0;
}

.c2r1 {
  grid-column: span 4;
  grid-row: span 1;
}

.c2r2 {
  grid-column: span 4;
  grid-row: span 1;
}

.c2r3 {
  grid-column: span 4;
  grid-row: span 1;
}

.c2r6 {
  grid-column: span 4;
  grid-row: span 1;
}

.c3r1 {
  grid-column: span 4;
  grid-row: span 1;
}

.c3r2 {
  grid-column: span 4;
  grid-row: span 1;
}

.c3r3 {
  grid-column: span 4;
  grid-row: span 1;
}

.c3r6 {
  grid-column: span 4;
  grid-row: span 1;
}

.c4r1 {
  grid-column: span 4;
  grid-row: span 1;
}

.c4r2 {
  grid-column: span 4;
  grid-row: span 1;
}

.c4r3 {
  grid-column: span 4;
  grid-row: span 1;
}

.c4r6 {
  grid-column: span 4;
  grid-row: span 1;
}

.c6r1 {
  grid-column: span 4;
  grid-row: span 1;
}

.c6r2 {
  grid-column: span 4;
  grid-row: span 1;
}

.c6r3 {
  grid-column: span 4;
  grid-row: span 1;
}

.c6r6 {
  grid-column: span 4;
  grid-row: span 1;
}

.c8r1 {
  grid-column: span 4;
  grid-row: span 1;
}

.c8r2 {
  grid-column: span 4;
  grid-row: span 1;
}

.c8r3 {
  grid-column: span 4;
  grid-row: span 1;
}

.c8r6 {
  grid-column: span 4;
  grid-row: span 1;
}

.order1 {
  order: 1;
}

.order2 {
  order: 4;
}

.order3 {
  order: 7;
}

.order4 {
  order: 2;
}

.order5 {
  order: 5;
}

.order6 {
  order: 8;
}

.order7 {
  order: 3;
}

.order8 {
  order: 6;
}

.order9 {
  order: 9;
}

@media screen and (min-width: 768px) {
  .c2r1 {
    grid-column: span 4;
    grid-row: span 1;
  }

  .c2r2 {
    grid-column: span 4;
    grid-row: span 1;
  }

  .c2r3 {
    grid-column: span 4;
    grid-row: span 1;
  }

  .c2r6 {
    grid-column: span 4;
    grid-row: span 1;
  }

  .c3r1 {
    grid-column: span 4;
    grid-row: span 1;
  }

  .c3r2 {
    grid-column: span 4;
    grid-row: span 1;
  }

  .c3r3 {
    grid-column: span 4;
    grid-row: span 1;
  }

  .c3r6 {
    grid-column: span 4;
    grid-row: span 1;
  }

  .c4r1 {
    grid-column: span 4;
    grid-row: span 1;
  }

  .c4r2 {
    grid-column: span 4;
    grid-row: span 1;
  }

  .c4r3 {
    grid-column: span 4;
    grid-row: span 1;
  }

  .c4r6 {
    grid-column: span 4;
    grid-row: span 1;
  }

  .c6r1 {
    grid-column: span 8;
    grid-row: span 1;
  }

  .c6r2 {
    grid-column: span 8;
    grid-row: span 1;
  }

  .c6r3 {
    grid-column: span 8;
    grid-row: span 1;
  }

  .c6r6 {
    grid-column: span 8;
    grid-row: span 1;
  }

  .c8r1 {
    grid-column: span 8;
    grid-row: span 1;
  }

  .c8r2 {
    grid-column: span 8;
    grid-row: span 1;
  }

  .c8r3 {
    grid-column: span 8;
    grid-row: span 1;
  }

  .c8r6 {
    grid-column: span 8;
    grid-row: span 1;
  }
}

@media screen and (min-width: 1367px) {
  .c2r1 {
    grid-column: span 2;
    grid-row: span 1;
  }

  .c2r2 {
    grid-column: span 2;
    grid-row: span 2;
  }

  .c2r3 {
    grid-column: span 2;
    grid-row: span 3;
  }

  .c2r6 {
    grid-column: span 2;
    grid-row: span 6;
  }

  .c3r1 {
    grid-column: span 3;
    grid-row: span 1;
  }

  .c3r2 {
    grid-column: span 3;
    grid-row: span 2;
  }

  .c3r3 {
    grid-column: span 3;
    grid-row: span 3;
  }

  .c3r6 {
    grid-column: span 3;
    grid-row: span 6;
  }

  .c4r1 {
    grid-column: span 4;
    grid-row: span 1;
  }

  .c4r2 {
    grid-column: span 4;
    grid-row: span 2;
  }

  .c4r3 {
    grid-column: span 4;
    grid-row: span 3;
  }

  .c4r6 {
    grid-column: span 4;
    grid-row: span 6;
  }

  .c6r1 {
    grid-column: span 6;
    grid-row: span 1;
  }

  .c6r2 {
    grid-column: span 6;
    grid-row: span 2;
  }

  .c6r3 {
    grid-column: span 6;
    grid-row: span 3;
  }

  .c6r6 {
    grid-column: span 6;
    grid-row: span 6;
  }

  .c8r1 {
    grid-column: span 8;
    grid-row: span 1;
  }

  .c8r2 {
    grid-column: span 8;
    grid-row: span 2;
  }

  .c8r3 {
    grid-column: span 8;
    grid-row: span 3;
  }

  .c8r6 {
    grid-column: span 8;
    grid-row: span 6;
  }

  .order2 {
    order: 2;
  }

  .order3 {
    order: 3;
  }

  .order4 {
    order: 4;
  }

  .order5 {
    order: 5;
  }

  .order6 {
    order: 6;
  }

  .order7 {
    order: 7;
  }

  .order8 {
    order: 8;
  }
}