#dashboard-content:has(#home) {
  h2 {
    margin-block-start: var(--spacing-section);
    padding-block-end: var(--spacing-m);
  }

  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: var(--spacing-m);
    column-gap: var(--spacing-l);

    .stats-card {
      border: var(--dashboard-border-width) solid var(--color-border);
      border-radius: 8px;
      padding: var(--spacing-m);
      container-type: inline-size;
      container-name: stats-card;

      .stats-header {
        display: flex;
        align-items: center;
        gap: var(--spacing-s);
        padding-block-end: var(--spacing-m);
      }

      .chart-body {
        display: flex;
        gap: var(--spacing-l);
        align-items: center;

        svg {
          max-width: 8rem;
        }
      }

      .stats-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        padding: 0;

        li {
          display: flex;
          align-items: center;
          gap: var(--spacing-s);
        }
      }
    }
  }
}

@container dashboard-content (max-width: 580px) {
  #dashboard-content:has(#home) {
    .stats-grid {
      grid-template-columns: 1fr;
    }
  }
}

@container stats-card (max-width: 350px) {
  #dashboard-content:has(#home) {
    .chart-body {
      flex-direction: column;
    }
  }
}