/* ===========================
    Layout
=========================== */

:root {
  /* layout */
  --header-height: 8rem;
  --lnb-background-height: 42rem;
  --container-inline-padding: 4rem;

  font-synthesis: none;
  -webkit-font-smoothing : antialiased; 
}

@media screen and (max-width: 1440px) {
  :root {
    --container-inline-padding: 2rem;
  }
}

@media screen and (max-width: 1024px) {
  :root {
    --header-height: 10rem;
  }
}

@media screen and (max-width: 780px) {
  :root {
    --font-size-xxl: 8rem;
    --font-size-xl: 6rem;
    --font-size-lg: 4.6rem;
    --font-size-md: 3rem;
    --font-size-base: 2.4rem;
    --font-size-sm: 2.2rem;
    --font-size-xs: 2rem;
    --font-size-xxs: 1.8rem;
    --font-size-tiny: 1.6rem;
    --font-size-mini: 1.4rem;

    --header-height: 8rem;
  }
}

@media screen and (max-width: 600px) {
  :root {
    --font-size-xxl: 4rem;
    --font-size-xl: 3.2rem;
    --font-size-lg: 2.4rem;
    --font-size-md: 2rem;
    --font-size-base: 1.8rem;
    --font-size-sm: 1.6rem;
    --font-size-xs: 1.6rem;
    --font-size-xxs: 1.4rem;
    --font-size-tiny: 1.4rem;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --font-size-xxl: 3.2rem;
    --font-size-xl: 2.8rem;
    --font-size-lg: 2rem;
    --font-size-md: 1.6rem;
    --font-size-base: 1.4rem;
    --font-size-sm: 1.2rem;
    --font-size-xs: 1.2rem;
    --font-size-xxs: 1.2rem;
    --font-size-tiny: 1rem;
    --container-inline-padding: 1.8rem;
  }
}

@media screen and (max-width: 320px) {
  :root {
    --font-size-xxl: 2rem;
    --font-size-xl: 1.8rem;
    --font-size-lg: 1.2rem;
    --font-size-md: 1.2rem;
    --font-size-base: 1rem;
    --font-size-sm: 1rem;
    --font-size-xs: 1rem;
    --font-size-xxs: 1rem;
    --font-size-tiny: 0.8rem;
    --container-inline-padding: 1.5rem;
  }
}