.dashboardWrapper {
  grid-template-columns: min-content auto;
  grid-template-areas: "sidebar main";
  --header-height: 5rem;
  --footer-height: 2rem;
  --small-spacing: 1rem; /* tw class: gap-4, m-4 etc. */
  --large-spacing: 2rem; /* tw class: gap-8, m-8 etc. */
  --header-size: calc(var(--header-height) + var(--small-spacing));
  --footer-size: calc(var(--footer-height) + var(--small-spacing));
}

.dashboardSidebar {
  grid-area: sidebar;
}

.dashboardMain {
  @apply gap-[var(--large-spacing)];
  grid-area: main;
  grid-template-rows: var(--header-height) calc(
      100vh - (var(--header-height) + var(--footer-height))
    );
  grid-template-areas: "header" "content";
}

.dashboardHeader {
  grid-area: header;
}

.dashboardContent {
  grid-area: content;
}

.dashboardContentWrapper {
  @apply gap-[var(--small-spacing)];
  min-height: calc(
    100vh -
      (
        var(--header-size) + var(--footer-size) + var(--small-spacing) +
          var(--small-spacing)
      )
  );
}