@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.form-order-container {
  .page-header {
    width: 100%;
    height: 40vh;
    background: var(--color-grey-100);
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    @include tablet {
      height: 20vh;
    }
  }

  .layout-container {
    position: relative;
    width: 50%;
    padding: var(--spacing-xxl) 4% var(--spacing-3xl) 10%;
    margin: var(--spacing-0) auto;
    margin-top: -20vh;
    background: var(--color-light);
    z-index: 0;

    @include desktop {
      width: 80%;
      padding: var(--spacing-xxl) 4%;
    }

    @include tablet {
      width: 100%;
      margin-top: var(--spacing-0);
    }

    .form-header {
      text-align: center;
    }

    .form-aside-container {
      position: absolute;
      top: calc(var(--spacing-3xl) * 2);
      left: -30%;
      width: 40%;

      @include desktop {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        margin-top: var(--spacing-xxl);

        .form-aside {
          display: flex;
          justify-content: space-between;
          align-items: stretch;
        }
      }

      @include mobile {
        .form-aside {
          flex-wrap: wrap;
          justify-content: center;
        }
      }
    }
  }
}
