.dashboard-container {
  display: grid;

  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 3;
  gap: 1.5rem;

  grid-template-areas:
    "total-spent total-expenses active-users"
    "expenses-pie-chart top-categories-chart top-categories-chart"
    "recent-expenses recent-expenses recent-expenses";
}

.dashboard-container > .total-spent {
  grid-area: total-spent;
}

.dashboard-container > .total-expenses {
  grid-area: total-expenses;
}

.dashboard-container > .active-users {
  grid-area: active-users;
}

.dashboard-container > .expenses-pie-chart {
  grid-area: expenses-pie-chart;
}

.dashboard-container > .top-categories-chart {
  grid-area: top-categories-chart;
}

.dashboard-container > .recent-expenses {
  grid-area: recent-expenses;
}