/* typography variables */
:root {
  /* Font sizes */
  --fs-footnote: 0.875rem; /* 14px */
  --fs-body: 1rem; /* 16px */
  --fs-h6: 1.125rem; /* 18px */
  --fs-h5: 1.375rem; /* 22px */
  --fs-h4: 1.5rem; /* 24px */
  --fs-h3: 1.75rem; /* 28px */
  --fs-h2: 2.25rem; /* 36px */
  --fs-h1: 2.625rem; /* 42px */
}

/* ==========================================================================
   Container Específicos por Breakpoint
   ========================================================================== */

/* Mobile: até 719px */
@media (max-width: 719px) {
  .main-menu-container {
    padding: 10px 36px;
  }

  .banner-container {
    padding-left: 35px;
    padding-right: 35px;
  }

  .block-container {
    padding: 50px 35px;
  }

  .footer-container {
    padding: 30px 25px;
  }
}

/* Tablet: 720px até 1023px */
@media (min-width: 720px) and (max-width: 1023px) {
  .main-menu-container {
    padding: 10px 36px;
  }

  .main-submenu-container {
    padding: 10px 80px;
  }

  .banner-container {
    padding-left: 50px;
    padding-right: 50px;
  }

  .block-container {
    padding: 50px 72px;
  }

  .footer-container {
    padding: 30px 72px;
  }
}

/* Desktop: 1024px até 1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
  .main-menu-container {
    padding: 30px 64px;
  }

   .main-submenu-container {
    padding: 10px 100px;
  }

  .banner-container {
    padding-left: 143px;
    padding-right: 143px;
  }

  .block-container {
    padding: 100px 100px;
  }

  .footer-container {
    padding: 45px 48px;
  }
}

/* Desktop Wide: 1440px ou mais */
@media (min-width: 1440px) {
  .main-menu-container {
    padding: 30px 240px;
  }

  .main-submenu-container {
    padding: 10px 350px;
  }

  .banner-container {
    padding-left: 143px;
    padding-right: 143px;
  }

  .block-container {
    padding: 100px 240px;
  }

  .footer-container {
    padding: 45px 128px;
  }

  .global-block-title {
    font-size: 40px;
    font-weight: 500;
    color: #222222;
  }

  .global-block-description {
    font-size: 28px;
    font-weight: 400;
    color: #222222;
  }
}