/* This style doesn't seem to work and has bad effects on the (rare) signup
 * modal. */
/* .signup {
  background-color: #000;
  background-image: url(../../../images/bandlab/sullivan/signup-background.svg);
  background-repeat: no-repeat;
  color: #fff;
} */

@media (max-width: 1024px) {
  .signup {
    background-position: bottom 56px center;
    background-size: 546px;
  }
}

@media (min-width: 1024px) {
  .signup {
    background-position: center;
  }
}

.signup-grid {
  display: grid;
}

@media (max-width: 1024px) {
  .signup-grid {
    grid-template-areas:
      "title"
      "form"
      "review";
  }
}

@media (min-width: 1024px) {
  .signup-grid {
    grid-template-areas:
      "title form"
      "review form";
    grid-template-columns: 1fr 480px;
    margin: 64px 0;
  }
}

.signup-grid-title {
  display: flex;
  flex-direction: column;
  grid-area: title;
  margin-bottom: 137px;
  margin-top: 47px;
  max-width: 564px;
}

@media (max-width: 1024px) {
  .signup-grid-title {
    gap: 16px;
    margin: 32px auto;
    max-width: 343px;
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .signup-grid-title {
    gap: 24px;
  }
}

.signup-grid-title h1 {
  text-wrap: balance;
}

.signup-grid-form {
  background: #fff;
  border-radius: 8px;
  box-sizing: border-box;
  color: #000;
  grid-area: form;
  text-align: center;
}

@media (max-width: 1024px) {
  .signup-grid-form {
    margin-left: auto;
    margin-right: auto;
    max-width: 343px;
    padding: 24px 16px;
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .signup-grid-form {
    padding: 40px 44px 46px;
  }
}

.signup-grid-review {
  display: flex;
  flex-direction: column;
  gap: 17px;
  grid-area: review;
  max-width: 485px;
}

.signup-grid-form-methods {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
  width: 100%;
}

.button-with-bandlab,
.button-with-facebook,
.button-with-google,
.button-with-apple,
.button-join {
  align-items: center;
  border-radius: 4px;
  display: flex;
  justify-content: center;
}

.button-with-bandlab,
.button-with-facebook,
.button-with-google,
.button-with-apple {
  gap: 15px;
  height: 56px;
}

.button-with-bandlab {
  background: #000;
  box-shadow: 0 2px 3px 0 #0000002b, 0 0 3px 0 #00000015;
  color: #fff;
}

.button-with-facebook {
  background: #1877f2;
  color: #fff;
}

.button-with-google {
  background: #fff;
  box-shadow: 0 2px 3px 0 #0000002b, 0 0 3px 0 #00000015;
  color: #0000008a;
}

.button-with-apple {
  background: #000;
  box-shadow: 0 2px 3px 0 #0000002b, 0 0 3px 0 #00000015;
  color: #fff;
}

.button-join {
  background: #5c6fff;
  border: 0;
  color: #fff;
  height: 50px;
}

.signup-grid-form-methods input {
  background-color: #f1f4f6;
  border: 1px solid #0000001a;
  border-radius: 4px;
  padding: 9px 20px;
}

.signup-grid-form-methods input::placeholder {
  color: #7e8999;
}

.signup-grid-review-user {
  display: flex;
  gap: 18px;
}

@media (max-width: 1024px) {
  .signup-grid-review {
    margin-bottom: 136px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 160px;
  }
}

.signup-footer {
  padding-bottom: 40px;
}

@media (max-width: 1024px) {
  .signup-footer {
    text-align: center;
  }
}