:root {
  --border-radus: 3px;
  --space-unit: 0.5rem; /* Unit for smaller devices */
  --mds-spacing-xx-small: calc(0.25 * var(--space-unit));
  --mds-spacing-x-small: calc(0.5 * var(--space-unit));
  --mds-spacing-small: calc(0.75 * var(--space-unit));
  --mds-spacing-medium: calc(1 * var(--space-unit));
  --mds-spacing-large: calc(1.25 * var(--space-unit));
  --mds-spacing-x-large: calc(1.75 * var(--space-unit));
}

/* larger screens */
@media (min-width: 720px) {
  :root {
    /* Space options are based on the --space-unit value. */
    --space-unit: 1rem;
  }
}