/* media queries */
@media screen and (min-width: 1401px), (max-width: 1400px){
  :root{
    --nav-height: calc(var(--size-unit)* 8);

    --page-padding-h: calc(var(--size-unit)* 3);
  }
}
@media screen and (max-width: 1280px){
}
@media screen and (max-width: 1024px){
}

@media screen and (max-width: 880px){
  :root{
    --size-unit: calc(var(--core-unit) * var(--ratio-size));
    --nav-height: calc(var(--size-unit) * 7);
  }
}

@media screen and (max-width: 680px){
  :root{
    --ratio-font-grow: 1.2;
    --page-padding-h: calc(var(--size-unit)* 2);
    --nav-height: calc(var(--size-unit) * 6);
  }
}

@media screen and (max-width: 480px){
}
@media screen and (max-width: 344px){
  :root{
    --ratio-font-grow: 1.1;
  }
}