Improve registration form

src/components/RegisterForm/styles.module.scss

@@ -1,7 +1,7 @@
 @import "../../theme/variables";
 @import "../../theme/mixins";
 
-.preRegisterIntro {
+.registerIntro {
     dt {
         font-weight: bold;
         margin-top: 10px;
@@ -20,37 +20,68 @@
     font-weight: normal;
 }
 
-.formLine {
+.inputWrapper {
     padding: 5px 0;
+    margin: 10px 0;
 
-    label {
-        display: block;
-        margin-left: 5px;
+    @include desktop {
+        display: flex;
     }
-    input,
-    textarea {
-        width: 100%;
-        padding: 4px;
-        border: 1px solid #333;
-        border-radius: 4px;
+
+    input[type="text"] {
+        min-width: 175px;
+        border: 1px solid $color-grey-medium;
         outline: 0;
     }
-    textarea {
-        height: 100px;
-    }
-    .inputRadio {
-        margin-left: 12px;
-        width: inherit;
-    }
-    .inputRadio + label {
-        display: inline;
-        margin: 0 0 0 5px;
-    }
 }
 
-.formButtons {
-    margin-top: 10px;
-    padding: 5px 0;
+.leftCol {
+    flex: 0 0 240px;
+}
+.leftColTiny {
+    flex: 0 0 120px;
+}
+
+.rightCol,
+.rightColLefter {
+    width: 100%;
+    text-align: center;
+}
+.rightCol {
+    text-align: center;
+}
+.rightColLefter {
+    text-align: left;
+}
+
+.rightColContainer {
+    display: inline-block;
+    width: 300px;
+    text-align: left;
+}
+
+.multipleChoiceTitle {
+    display: inline-block;
+    width: 240px;
+    margin-bottom: 10px;
+}
+
+.longAnswerLabel {
+    text-align: left;
+    display: inline-block;
+    margin-bottom: 10px;
+    width: 300px;
+}
+
+.shortAnswerLabel {
+    text-align: left;
+    display: inline-block;
+    margin-bottom: 10px;
+    width: 100px;
+}
+
+.buttonWrapper {
+    margin-bottom: 10px;
     text-align: center;
 
     [disabled="true"] {
@@ -59,6 +90,20 @@
     }
 }
 
+.commentWrapper {
+    width: 100%;
+    margin: 0 0 14px;
+
+    textarea {
+        width: 100%;
+        height: 120px;
+        padding: 5px;
+        border: 1px solid $color-grey-light;
+        background-color: $color-grey-lighter;
+        outline: 0;
+    }
+}
+
 .formReactions {
     margin-top: 3px;
     padding: 5px 0;
@@ -74,3 +119,58 @@
         color: rgb(255, 0, 0);
     }
 }
+
+.pelImg1 {
+    background: url("../../app/img/pel2016.jpg") no-repeat center center;
+}
+.pelImg2 {
+    background: url("../../app/img/pel2017.jpg") no-repeat center center;
+}
+.pelImg1,
+.pelImg2 {
+    position: relative;
+    width: calc(90vw);
+    height: calc(60vw);
+    background-size: cover;
+    background-size: cover;
+    background-size: cover;
+    background-size: cover;
+    transition: background 2000ms ease-in-out 3000ms;
+
+    @include desktop {
+        width: 552px;
+        height: 368px;
+    }
+}
+
+.beneImg {
+    position: relative;
+    width: calc(90vw);
+    height: calc(40vw);
+    background: url("../../app/img/bene2019.jpg") no-repeat center center;
+    background-size: cover;
+    background-size: cover;
+    background-size: cover;
+    background-size: cover;
+
+    @include desktop {
+        width: 552px;
+        height: 249px;
+    }
+}
+
+.planImg {
+    position: relative;
+    width: calc(90vw);
+    height: calc(168vw);
+    background: url("../../app/img/plan2019.jpg") no-repeat center center;
+    background-size: cover;
+    background-size: cover;
+    background-size: cover;
+    background-size: cover;
+
+    @include desktop {
+        width: 552px;
+        height: 1028px;
+    }
+}