@import "./../../common/mini-reset.css";
@import "./../../common/base.css";
@import "./../../common/a11y.css";
@import "./07-form-components.css";

.container{
  padding: 0 1.25rem;

  .brand{
    inline-size: 14.375rem;
    margin-inline: auto;
    margin-block: 4.375rem 2.8125rem;

    @media (min-width: 48rem) {
      margin-block: 6.25rem 3.125rem;
    }
  }

  .login-form{
    display: flex;
    flex-flow: column nowrap;
    gap: 0.625rem;

    @media (min-width: 48rem) {
      inline-size: 31.25rem;
      padding: 0 1.25rem; 
      margin-inline: auto;
    }

    .flex-wrapper{
      order: 1;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      gap: 0.25rem;

      .checkbox{
        margin-inline-end: auto;
      }
    }

    button{
      margin-block-start: 0.625rem;
    }
  }
}