@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

body {
  padding: 0;
  margin: 0;
}

.dashboard-top-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 24px;
  row-gap: 24px;
  grid-template-areas:
    "welcome      downloadable"
    "modules      .";
}

.dashboard-top-grid.df-span {
  grid-template-areas:
    "welcome      downloadable"
    "modules      downloadable";
}

.dashboard-top-grid.df-empty {
  grid-template-areas:
    "welcome      downloadable"
    "modules      modules";
}

.dashboard-top-grid.df-hidden {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "welcome"
    "modules";
}

.welcome-area      { grid-area: welcome; align-self: start; }
.downloadable-area { grid-area: downloadable; }
.modules-area       { grid-area: modules; }

.dashboard-modules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  width: 100%;
}

@media (max-width: 1440px) {
  .dashboard-top-grid.df-span {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "welcome"
      "downloadable"
      "modules";
    column-gap: 16px;
    row-gap: 16px;
  }

  .dashboard-top-grid.df-empty {
    grid-template-columns: 3fr 2fr;
    column-gap: 20px;
    row-gap: 20px;
  }

  .welcome-area .mantine-Paper-root {
    padding-right: clamp(140px, 12vw, 280px) !important;
  }

  .advisories-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1024px) {
  .dashboard-top-grid,
  .dashboard-top-grid.df-span,
  .dashboard-top-grid.df-empty {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "welcome"
      "downloadable"
      "modules";
    column-gap: 16px;
    row-gap: 16px;
  }
}

@media (max-width: 600px) {
  .dashboard-modules-grid {
    grid-template-columns: 1fr;
  }
}