/* Ajustes de responsividade para zoom do navegador e viewports intermediarios. */
html,
body,
#root,
#lexium-landing-portal {
  max-width: 100%;
  overflow-x: clip;
}

#recursos,
#produtos {
  box-sizing: border-box;
  max-width: 100%;
}

#recursos > div,
#produtos > div,
#recursos [class*="max-w-7xl"],
#produtos [class*="max-w-7xl"] {
  min-width: 0;
  max-width: 100%;
}

#recursos img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

#produtos [class*="grid-cols"] > *,
#recursos [class*="grid-cols"] > * {
  min-width: 0;
}

/* Cards ambientes: ocultos quando o zoom reduz o espaco util. */
@media (max-width: 2299px) {
  #recursos [class*="xl:left-[-250px]"],
  #recursos [class*="xl:right-[-250px]"],
  #produtos [class*="2xl:left-[-250px]"],
  #produtos [class*="2xl:right-[-250px]"] {
    display: none !important;
  }
}

/* Correcao isolada do carrossel de relatorios da secao Sobre. */
@media (min-width: 1024px) and (max-width: 1799px) {
  #sobre > div:nth-of-type(2) > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  #sobre > div:nth-of-type(2) > .grid > :nth-child(1),
  #sobre > div:nth-of-type(2) > .grid > :nth-child(3),
  #sobre > div:nth-of-type(2) > .grid > :nth-child(7),
  #sobre > div:nth-of-type(2) > .grid > :nth-child(9) {
    display: none !important;
  }

  #sobre > div:nth-of-type(2) > .grid > :nth-child(2),
  #sobre > div:nth-of-type(2) > .grid > :nth-child(4),
  #sobre > div:nth-of-type(2) > .grid > :nth-child(6),
  #sobre > div:nth-of-type(2) > .grid > :nth-child(8) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  #sobre > div:nth-of-type(2) > .grid > :nth-child(5) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 767px) {
  #recursos,
  #produtos {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #produtos [class*="rounded-[32px]"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #produtos [class*="items-center"][class*="gap-3"],
  #produtos [class*="items-center"][class*="gap-4"] {
    flex-wrap: wrap;
  }
}