@media (min-width: $media-mobile-middle) {
  .login {
    &-wrapper {
      background-color: #5a4d35;
      background-size: cover;
    }
    &__form {
      padding: 40px;
    }
  }
}

@media (min-width: 640px) {
  .login {
    &__text {
      font-size: 25px;
    }
  }
}

@media (min-width: 980px) and (max-height: 768px) {
  .login {
    padding: 30px 0;
  }
}

@media (min-width: 980px) and (min-height: 769px) {
  .login {
    padding: 60px 0;
  }
}

@media (min-width: 980px) {
  .login {
    width: 94%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)) minmax(440px, 460px);
    grid-column-gap: 40px;
    &__content {
      margin-top: 50px;
    }
  }
  .no-cssgrid {
    .login {
      display: flex;
      flex-wrap: wrap;
      &__content {
        flex: 1;
      }
      &__form {
        margin-left: 40px;
        flex: 0 0 460px;
      }
    }
  }
}