/* ==========================================================
   RESPONSIVE
========================================================== */

/* ----------------------------------------------------------
   Tablets
---------------------------------------------------------- */

@media (max-width: 900px) {
  html {
    font-size: 15px;
  }

  .app {
    width: min(100% - 24px, var(--container-width));
  }
}

/* ----------------------------------------------------------
   Mobile
---------------------------------------------------------- */

@media (max-width: 700px) {
  .header {
    margin-bottom: 24px;
  }

  .logo {
    width: 64px;

    height: 64px;
  }

  .brand-title {
    font-size: 1.9rem;
  }

  .header-message {
    font-size: 0.98rem;
  }

  .card {
    padding: 22px;
  }

  .card-title {
    font-size: 1.25rem;
  }

  .card-description {
    font-size: 0.95rem;
  }

  .benefits-list {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .footer-grid {
    grid-template-columns: 1fr;

    text-align: center;

    gap: 22px;
  }

  .footer-brand {
    text-align: center;
  }

  .footer-brand img {
    margin: auto;
  }
}

/* ----------------------------------------------------------
   Small phones
---------------------------------------------------------- */

@media (max-width: 560px) {
  html {
    font-size: 14px;
  }

  .app {
    width: calc(100% - 18px);

    margin: 18px auto;
  }

  .btn {
    min-height: 48px;
  }

  .input {
    height: 48px;
  }
}

/* ----------------------------------------------------------
   Very small phones
---------------------------------------------------------- */

@media (max-width: 400px) {
  html {
    font-size: 13.5px;
  }

  .card {
    padding: 18px;
  }

  .brand-title {
    font-size: 1.65rem;
  }
}