.l-centeringbox{ width: 100%; height: 100%; &-wrap{ position: absolute; top: 0; left: 50%; transform: translate(-50%,0); width: 100%; border-radius: 20px; box-sizing: border-box; @include media-breakpoint-up(lg) { padding: 192px 0; } } } .l-single { &-main{ min-height: 100vh; /* Fallback */ min-height: calc(var(--vh, 1vh) * 100); } &-container{ max-width: 540px; width: 100%; margin: 0 auto; border-radius: 8px; padding: 50px 24px 70px; background: #fff; box-sizing: border-box; display: block; @include media-breakpoint-up(lg) { width: 540px; max-width: none; box-shadow: 0 1px 4px #9b8989; padding: 60px 60px 60px; } h1{ font-size: 3rem; text-align: center; margin-bottom: 35px; line-height: 1; @include media-breakpoint-up(lg) { margin-bottom: 35px; font-size: 2.8rem; } @include media-breakpoint-down(md) { letter-spacing: 0.02em; } @include media-breakpoint-down(sm) { font-size: 2.8rem; } } } &-inner{ width: 100%; margin: 0 auto; width: 410px; @include media-breakpoint-down(md) { width: 100%; } .form-group{ margin: 0 0 17px; @include media-breakpoint-up(lg) { margin: 0 0 20px; } } } } .l-registration{ .l-single-container h1{ @include media-breakpoint-up(lg) { margin-bottom: 40px; } } } .l-container{ display: flex; flex-flow: row-reverse; background: #fff; justify-content: flex-end; @include media-breakpoint-up(lg) { // background: $_color-bg02; } } .l-content{ max-width: 540px; width: 100%; margin: 0 auto; border-radius: 8px; padding: 30px 20px 70px; background: #fff; box-sizing: border-box; display: block; @include media-breakpoint-up(lg) { width: 540px; max-width: none; padding: 40px 60px 60px; } h1{ font-size: 3rem; text-align: center; margin-bottom: 35px; line-height: 1; @include media-breakpoint-up(lg) { margin-bottom: 35px; font-size: 2.8rem; } @include media-breakpoint-down(md) { letter-spacing: 0.02em; } @include media-breakpoint-down(sm) { font-size: 2.8rem; } } }