@media (max-width: 991px) {
  .app {
    display: flex;
    flex-direction: column;
    padding-bottom: 32px;
  }
  /* header */
  nav {
    position: relative;
    padding-bottom: 20px;
  }
  nav form {
    font-size: 1.6rem;
    position: absolute;
    bottom: -35px;
    left: 0;
  }

  /* balance */
  .balance {
    margin-top: 20px;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    gap: 2rem;
  }
  .balance__label {
    margin-bottom: 5px;
  }
  .summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    column-gap: 10px;
    row-gap: 10px;
    position: relative;
    padding-top: 25px;
  }
  .btn--sort {
    position: absolute;
    top: -20px;
    left: 50%;
    font-size: 16px;
    transform: translate(-50%, 50%);
    -webkit-transform: translate(-50%, 50%);
    -moz-transform: translate(-50%, 50%);
    -ms-transform: translate(-50%, 50%);
    -o-transform: translate(-50%, 50%);
  }
  .movements {
    height: 300px;
    overflow: auto;
    margin-bottom: 10px;
  }
  .summary__value {
    justify-self: flex-end;
  }
}