/* for 912 px */
@media (max-width: 57em) {
  html {
    font-size: 58.5%;
  }

  .app {
    /* grid-template-columns: 2fr; */
    max-width: 80rem;
    display: flex;
    flex-direction: column;
  }

  .form__input {
    padding: 0.5rem 1rem;
  }

  .balance__value {
    font-size: 4.2rem;
  }

  .operation--transfer {
    margin-top: 10px;
  }
}

/* 576px */
@media (max-width: 38em) {
  .login__input {
    width: 10.3rem;
  }

  .welcome {
    font-size: 1.6rem;
  }

  .logo {
    height: 5rem;
  }
}

/* 528 px */
@media (max-width: 33em) {
  html {
    font-size: 55.5%;
  }

  nav {
    padding: 0 0;
  }

  .balance__value {
    font-size: 3.8rem;
  }

  .summary {
    margin-top: 0;
  }

  .summary__value {
    font-size: 2rem;
  }
}

/* 480 px */
@media (max-width: 30em) {
  .summary {
    padding: 0 0;
  }

  .summary__label {
    margin-right: 0.6rem;
  }

  .summary__value--interest {
    margin-right: 1rem;
  }

  .logo {
    padding-right: 2rem;
  }

  .summary__value {
    margin-right: 1.4rem;
    font-size: 1.8rem;
  }

  .btn--sort {
    margin-left: 0;
  }
}

/* for 390 px */
@media (max-width: 24.375em) {
  .summary__value {
    margin-right: 1.2rem;
    font-size: 1.6rem;
  }

  .btn--sort {
    /* margin-left: auto; */
    font-size: 1.2rem;
  }

  .balance__value {
    font-size: 3.4rem;
  }

  .balance__label {
    font-size: 2rem;
  }
}

/* for 380 px */
@media (max-width: 23.75em) {
  .movements__value {
    font-size: 1.4rem;
  }

  .movements__type {
    margin-right: 1rem;
    font-size: 0.9rem;
    padding: 0.2rem 1rem;
  }

  .movements__row {
    padding: 2.25rem 2.8rem;
  }

  .movements__date {
    font-size: 0.9rem;
  }

  .balance__value {
    font-size: 2.4rem;
  }

  .summary__value {
    margin-right: 0.9rem;
    font-size: 1.4rem;
  }

  .summary__label,
  .btn--sort {
    font-size: 1rem;
  }

  .login__input {
    width: 9rem;
  }
}