:root {
  --font-size-base: 1rem;
  --font-size-h1: 2rem;
  --font-size-h2: 1.5rem;
  --font-size-h3: 1.25rem;
  --font-size-small: 0.875rem;

  --spacing-xs: 0.125rem; /* 2px */
  --spacing-sm: 0.25rem; /* 4px */
  --spacing-md: 0.5rem; /* 8px */
  --spacing-lg: 0.75rem; /* 12px */
  --spacing-xl: 1rem; /* 16px */
  --spacing-xxl: 1.5rem; /* 24px */

  --margin-section: 0.75rem;
  --margin-block: 0.5rem;
  --margin-inline: 0.25rem;

  --padding-section: 0.75rem;
  --padding-block: 0.5rem;
  --padding-inline: 0.25rem;
  --padding-container: 0.5rem;
}

@media screen and (max-width: 21cm) {
  :root {
    --font-size-base: 0.875rem;
    --font-size-h1: 1.5rem;
    --font-size-h2: 1.25rem;
    --font-size-h3: 1.125rem;
    --font-size-small: 0.75rem;

    --spacing-xs: 0.0625rem; /* 1px */
    --spacing-sm: 0.125rem; /* 2px */
    --spacing-md: 0.25rem; /* 4px */
    --spacing-lg: 0.375rem; /* 6px */
    --spacing-xl: 0.5rem; /* 8px */
    --spacing-xxl: 0.75rem; /* 12px */

    --margin-section: 0.5rem;
    --margin-block: 0.375rem;
    --margin-inline: 0.125rem;

    --padding-section: 0.5rem;
    --padding-block: 0.375rem;
    --padding-inline: 0.125rem;
    --padding-container: 0.375rem;
  }
}

@media screen and (max-width: 630px) {
  :root {
    --font-size-base: 0.75rem;
    --font-size-h1: 1.25rem;
    --font-size-h2: 1.125rem;
    --font-size-h3: 1.0625rem;
    --font-size-small: 0.625rem;
  }
}

@media screen and (max-width: 550px) {
  :root {
    --font-size-base: 0.625rem;
    --font-size-h1: 1.0625rem;
    --font-size-h2: 0.9375rem;
    --font-size-h3: 0.875rem;
    --font-size-small: 0.5rem;
  }
}

@media screen and (max-width: 505px) {
  :root {
    --font-size-base: 0.45rem;
    --font-size-h1: 0.8rem;
    --font-size-h2: 0.7rem;
    --font-size-h3: 0.6rem;
    --font-size-small: 0.35rem;
  }
}

body {
  font-size: var(--font-size-base);
  margin: 0;
  padding: 0;
}

h1 {
  font-size: var(--font-size-h1);
  margin: var(--margin-block) 0;
}

h2 {
  font-size: var(--font-size-h2);
  margin: var(--margin-block) 0;
}

h3 {
  font-size: var(--font-size-h3);
  margin: var(--margin-block) 0;
}

.small-text {
  font-size: var(--font-size-small);
}