.root {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: rem(20);

  @media (max-width: $mantine-breakpoint-sm) {
    grid-template-rows: minmax(0, 1fr);
  }
}

.statsCardContainer {
  grid-column: span 2 / span 9;

  @media (max-width: $mantine-breakpoint-sm) {
    grid-column: span 9 / span 9;
  }
}

.insightContainer {
  grid-column: span 3 / span 9;
  grid-row: span 4 / span 7;

  @media (max-width: $mantine-breakpoint-sm) {
    grid-column: span 9 / span 9;
  }
}

.unqiueVisitorContainer {
  grid-column: span 3 / span 12;
  grid-row: span 3 / span 7;

  @media (max-width: $mantine-breakpoint-sm) {
    grid-column: span 9 / span 9;
  }
}

.pageViewContainer {
  grid-column: span 3 / span 12;
  grid-row: span 3 / span 7;

  @media (max-width: $mantine-breakpoint-sm) {
    grid-column: span 9 / span 9;
  }
}

.pageNameContainer {
  grid-column: span 6 / span 12;
  grid-row: span 3 / span 7;

  @media (max-width: $mantine-breakpoint-sm) {
    grid-column: span 9 / span 9;
  }
}

.deviceUserContainer {
  grid-column: span 3 / span 12;
  grid-row: span 3 / span 7;

  @media (max-width: $mantine-breakpoint-sm) {
    grid-column: span 9 / span 9;
  }
}
