@media only screen and (min-width: 2400px) {
  html,
  body {
    font-size: 1.2em;
  }
}

@media only screen and (min-width: 3000px) {
  html,
  body {
    font-size: 1.3em;
  }
}

@media only screen and (min-width: 3600px) {
  html,
  body {
    font-size: 1.4em;
  }
}

@media only screen and (max-width: 1880px) {
  html,
  body {
    font-size: 0.98em;
  }

  h1 {
    font-size: 6em;
  }
}

@media only screen and (max-width: 1650px) {
  html,
  body {
    font-size: 0.94em;
  }

  h1 {
    font-size: 5.9em;
  }
}

@media only screen and (max-width: 1595px) {
  html,
  body {
    font-size: 0.89em;
  }

  .banner-section h1,
  .about-section h2,
  .download-section h2 {
    font-size: calc(var(--h1) * 1.05);
  }
}

@media only screen and (max-width: 1440px) {
}

@media only screen and (max-width: 1400px) {
  html,
  body {
    font-size: 0.86em;
  }
}

@media only screen and (max-width: 1280px) {
  html,
  body {
    font-size: 0.83em;
  }

  :root {
    --p: 1.1rem;
    --p-big: 1.35rem;
  }
}

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 1150px) {
  .download-section .img-center {
    width: 8em !important;
    transform: scale(2.25);
  }

  .banner-bg {
    margin-bottom: 45%;
  }
}

@media only screen and (max-width: 1000px) {
}

@media only screen and (max-width: 991px) {
  html,
  body {
    font-size: 0.8em;
  }

  .menu-panel {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-color: #fff4d9cf;
    overflow: hidden;
    backdrop-filter: blur(10px);
    opacity: 0;
  }

  .menu-panel[data-visible] {
    display: block;
  }

  nav .menu {
    display: block;
    padding: 5em;
    padding-top: 15em;
  }

  nav .menu li {
    margin-bottom: 2em;
  }

  nav .menu li a {
    font-size: var(--h3);
  }

  nav .nav-toggle {
    display: block;
  }

  nav .el-feito-com-amor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .banner-container .el-gaucho {
    display: none;
  }

  .banner-container {
    top: 54em;
  }

  .banner-bg {
    margin-bottom: 50em;
  }

  .btn-download,
  .download-container .btn-download,
  .about-section .btn-download {
    width: 20em;
  }

  .download-section .download-container {
    justify-content: center;
  }

  .el-coracao-container {
    width: 50vw;
    margin: 0 auto;
  }

  .download-section .img-left,
  .download-section .img-right {
    height: 13em;
  }
}

@media only screen and (max-width: 768px) {
  html,
  body {
    font-size: 0.78em;
  }

  .banner-section h1,
  .about-section h2 {
    font-size: calc(var(--h1) / 1.15);
  }

  nav .nav-toggle {
    transform: scale(1.1);
  }

  .logos-container {
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 2em;
  }

  .logos-container a {
    width: 30%;
  }

  .download-section .img-right img:nth-child(2),
  .download-section .img-left img:nth-child(2) {
    display: none;
  }
}

@media only screen and (max-width: 650px) {
  .download-section .img-left,
  .download-section .img-right {
    height: 10em;
  }

  .download-section .img-container img {
    width: 13em;
  }

  .download-section .img-center {
    transform: scale(1.95);
  }
}

@media only screen and (max-width: 575px) {
  nav .el-feito-com-amor {
    top: 9.5em;
    right: 4em;
    left: auto;
    transform: none;
  }
}

@media only screen and (max-width: 550px) {
  html,
  body {
    font-size: 0.75em;
  }

  .logos-container {
    gap: 3em;
  }

  .logos-container a {
    width: 100%;
    max-width: 100%;
  }

  .logos-container a img {
    width: 20em;
  }

  .el-coracao-container {
    width: 80vw;
  }

  .projects-container {
    flex-wrap: wrap;
  }

  .projects-container a {
    width: 100%;
  }

  .download-section .img-container img {
    width: 10em;
  }

  .download-section .img-center {
    transform: scale(1.7);
  }

  .banner-container {
    top: 55em;
  }

  .banner-bg {
    margin-bottom: 50em;
  }
}

@media only screen and (max-width: 450px) {
  html,
  body {
    font-size: 0.65em;
  }

  .banner-section h1,
  .about-section h2,
  .download-section h2,
  .about-section h4 {
    font-size: calc(var(--h1) / 1.45);
  }
}

@media only screen and (max-width: 360px) {
  html,
  body {
    font-size: 0.62em;
  }

  .banner-section h1,
  .about-section h2,
  .download-section h2 {
    font-size: calc(var(--h1) / 1.65);
  }

  .download-section .download-container {
    flex-wrap: wrap;
  }

  .btn-download,
  .download-container .btn-download,
  .about-section .btn-download {
    width: 70%;
  }
}