.customer_login {
  position: relative;

  h1 {
    font-weight: 600;
    margin-bottom: 4rem;
    min-height: 2rem;
  }

  h2 {
    font-size: 30px;
    font-weight: 400;
    min-height: 8rem;
  }

  .customer_login_content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;

    @media screen and (max-width: 768px) {
      grid-template-columns: unset;
      grid-template-rows: 1fr 1fr;
      gap: 1rem;
    }

    p {
      min-height: 6rem;
    }

    a {
      width: fit-content;
    }

    a.btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 4.4rem;
      padding: 1.1rem 2.4rem;
      border: 0;
      border-radius: 1.2rem;
      background-color: #0b1b23;
      color: #ffffff;
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.1;
      text-decoration: none;
      transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
    }

    a.btn:hover,
    a.btn:focus-visible {
      background-color: #0b1b23;
      color: #ffffff;
      text-decoration: none;
      filter: brightness(1.05);
    }
  }
}

.customer_login.left {
  text-align: left;

  .customer_login_content h2,
  .customer_login_content p {
    text-align: left;
  }

  .customer_login_content a {
    margin-inline: 0 auto;
  }
}

.customer_login.center {
  text-align: center;

  .customer_login_content h2,
  .customer_login_content p {
    text-align: center;
  }

  .customer_login_content a {
    margin-inline: auto;
  }
}