/*---------------------------------
  responsive typography scale
  desktop >= 992px, tablet 768-991px, phone < 768px
---------------------------------*/
:root {
  --aq-fs-body: 14px;
  --aq-fs-p: 16px;
  --aq-fs-h1: 40px;
  --aq-fs-h2: 36px;
  --aq-fs-h3: 28px;
  --aq-fs-h4: 24px;
  --aq-fs-h5: 20px;
  --aq-fs-h6: 16px;
}

@media (max-width: 991px) {
  :root {
    --aq-fs-body: 14px;
    --aq-fs-p: 15px;
    --aq-fs-h1: 32px;
    --aq-fs-h2: 28px;
    --aq-fs-h3: 24px;
    --aq-fs-h4: 20px;
    --aq-fs-h5: 18px;
    --aq-fs-h6: 15px;
  }
}

@media (max-width: 767px) {
  :root {
    --aq-fs-body: 12px;
    --aq-fs-p: 13px;
    --aq-fs-h1: 22px;
    --aq-fs-h2: 20px;
    --aq-fs-h3: 18px;
    --aq-fs-h4: 16px;
    --aq-fs-h5: 14px;
    --aq-fs-h6: 13px;
  }
}

body {
  font-size: var(--aq-fs-body);
}

p {
  font-size: var(--aq-fs-p);
}

h1 {
  font-size: var(--aq-fs-h1);
}

h2 {
  font-size: var(--aq-fs-h2);
}

h3 {
  font-size: var(--aq-fs-h3);
}

h4 {
  font-size: var(--aq-fs-h4);
}

h5 {
  font-size: var(--aq-fs-h5);
}

h6 {
  font-size: var(--aq-fs-h6);
}