/* ---------------------------------------------------------
   6. RESPONSIVE STACKING 
--------------------------------------------------------- */

/* MD - TABLETS: 768 - 1024px */

@media (max-width: 51rem) {
  /* 815px / 16px = 50.9375 = 51rem */
  /* 51rem x 16px = 816px */

  html {
      font-size: 50%;
      /* 8px / 16px = 50% */
  }
}

/* XS - PHONE PORTRAIT: <576px */

  @media (max-width: 34rem) {
    /* 530 / 16 = 33.125 = 34rem */
    /* 34rem x 16 = 544 */

    html {
        font-size: 37.5%;
        /* 6px / 16px = 37.5 */
    }

    #dashboard {
      padding: var(--space-md) var(--space-sm);
      gap: var(--space-md);
      width: 70%;
    }
  
    .dashboard-card {
      padding: var(--space-sm);
    }
  
    .welcome-card h3,
    .account-section h3 {
      font-size: var(--text-h5);
    }
  
    .welcome-card p,
    .account-section li {
      font-size: var(--text-base);
    }
  }