Refactor form styling

src/stylesheets/base/_form.scss

@@ -1,7 +1,12 @@
-form.form {
+form {
 	display: grid;
 	gap: 1rem;
 
+	.input-group {
+		display: grid;
+		gap: 1rem;
+	}
+
 	input:not([type='submit']), textarea {
 		background: #E1E1E1;
 		border: none;
@@ -21,10 +26,8 @@ form.form {
 	}
 
 	@include respond-to('medium') {
-		.form__input-group {
+		.input-group {
-			display: grid;
 			grid-template-columns: 1fr 1fr;
-			gap: 1rem;
 		}
 	}
 }

src/stylesheets/components/_mainForm.scss

@@ -1,14 +1,4 @@
-form.mainForm {
+.mainForm {
-	@extend .form;
-
-	input[type='submit'] {
-		@extend .btn, .btn--primary, .btn--full;
-		width: 100%;
-		padding: 1rem 0;
-	}
-}
-
-.mainFormContainer {
 	margin: 2rem auto 0 auto;
 	width: 85vw;
 
@@ -19,6 +9,12 @@ form.mainForm {
 		font-size: 1.2em;
 	}
 
+	input[type='submit'] {
+		@extend .btn, .btn--primary, .btn--full;
+		width: 100%;
+		padding: 1rem 0;
+	}
+
 	@include respond-to('large') {
 		width: 40vw;
 	}

src/stylesheets/main.scss

@@ -5,13 +5,13 @@
 @import 'vendors/normalise';
 
 @import 'base/typography';
+@import 'base/form';
 
 @import 'components/mainNav';
 @import 'components/button';
 @import 'components/feature';
 @import 'components/testimonial';
 @import 'components/title';
-@import 'components/form';
 @import 'components/mainPageHeader';
 @import 'components/mainForm';
 

views/index.hbs

@@ -77,8 +77,8 @@
 				<span>Stratos HQ, HX9 9HN</span>
 			</div>
 		</div>
-		<form class='form' action='/contact' method='post'>
+		<form action='/contact' method='post'>
-			<div class='form__input-group'>
+			<div class='input-group'>
 				<input type='text' id='fname' name='fname' placeholder='First Name' required/>
 				<input type='text' id='lname' name='lname' placeholder='Last Name' required/>
 			</div>

views/login.hbs

@@ -1,7 +1,7 @@
 {{> mainPageHeader name='Log In' }}
 
-<div class='mainFormContainer'>
+<div class='mainForm'>
-	<form class='mainForm' action='/login' method='post'>
+	<form action='/login' method='post'>
 		<input type='email' id='email' name='email' placeholder='Email Address' required/>
 		<input type='password' id='password' name='password' placeholder='Password' required/>