Correcting the indentation and placing the .divider under parent class

Author: ZahraB21

styles/Home.module.scss

@@ -1,113 +1,117 @@
-hr.divider {
-    border-top: 1px solid #eaeaea;
-    width: 100%;
-    margin: 4rem 0;
+@import "variables";
+
+hr {
+	&.divider {
+		border-top: 1px solid #eaeaea;
+		width: 100%;
+		margin: 4rem 0;
+	}
 }
 
 .title {
-    margin: 0;
-    line-height: 1.15;
-    font-size: 2.5rem;
-    text-align: center;
+	margin: 0;
+	line-height: 1.15;
+	font-size: 2.5rem;
+	text-align: center;
 
-    a {
-        color: #0070f3;
-        text-decoration: none;
+	a {
+		color: #0070f3;
+		text-decoration: none;
 
-        &:hover,
-        &:focus,
-        &:active {
-            text-decoration: underline;
-        }
-    }
+		&:hover,
+		&:focus,
+		&:active {
+			text-decoration: underline;
+		}
+	}
 }
 
 .description {
-    line-height: 1.5;
-    font-size: 1.5rem;
-    text-align: center;
-    max-width: 90%;
-    margin: 0 auto;
+	line-height: 1.5;
+	font-size: 1.5rem;
+	text-align: center;
+	max-width: 90%;
+	margin: 0 auto;
 }
 
 .centerText {
-    text-align: center;
-    width: 90%;
-    margin: 1.5rem auto;
+	text-align: center;
+	width: 90%;
+	margin: 1.5rem auto;
 }
 
 .grid {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    margin: 3rem auto;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+	margin: 3rem auto;
 }
 
 .card {
-    height: 13rem;
-    max-width: 40%;
-    margin: 1.5rem;
-    flex-basis: 45%;
-    padding: 1.5rem;
-    text-align: left;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-decoration: none;
-    border: 2px solid #666;
-    transition: color 0.15s ease, border-color 0.15s ease;
+	height: 13rem;
+	max-width: 40%;
+	margin: 1.5rem;
+	flex-basis: 45%;
+	padding: 1.5rem;
+	text-align: left;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	text-decoration: none;
+	border: 2px solid #666;
+	transition: color 0.15s ease, border-color 0.15s ease;
 
-    &:hover,
-    &:focus,
-    &:active {
-        color: #666;
-        border-color: #eaeaea;
-    }
+	&:hover,
+	&:focus,
+	&:active {
+		color: #666;
+		border-color: #eaeaea;
+	}
 
-    p {
-        margin: 0 1rem;
-        font-size: 1.125rem;
-        line-height: 1.5;
-        text-align: center;
-        font-weight: bold;
-    }
+	p {
+		margin: 0 1rem;
+		font-size: 1.125rem;
+		line-height: 1.5;
+		text-align: center;
+		font-weight: bold;
+	}
 }
 
 .button {
-    height: 2.4rem;
-    width: 8rem;
-    border-radius: 5px;
-    background-color: #696969;
-    color: #fff;
-    font-size: 0.875rem;
-    border: none;
-    text-transform: uppercase;
-    transition: opacity 0.3s ease;
+	height: 2.4rem;
+	width: 8rem;
+	border-radius: 5px;
+	background-color: #696969;
+	color: #fff;
+	font-size: 0.875rem;
+	border: none;
+	text-transform: uppercase;
+	transition: opacity 0.3s ease;
 
-    &:hover {
-        opacity: 65%;
-        cursor: pointer;
-    }
+	&:hover {
+		opacity: 65%;
+		cursor: pointer;
+	}
 }
 
-@media (min-width: 1024px) {
-    .title {
-        font-size: 4rem;
-    }
+@media (min-width: $desktop-breakpoint) {
+	.title {
+		font-size: 4rem;
+	}
 }
 
 @media (max-width: 728px) {
-    .grid {
-        width: 100%;
-        flex-direction: column;
-        margin: 3rem 0;
-    }
+	.grid {
+		width: 100%;
+		flex-direction: column;
+		margin: 3rem 0;
+	}
 
-    .card {
-        max-width: none;
-        margin: 0.5rem;
-        width: 90%;
-        min-height: 7rem;
-    }
+	.card {
+		max-width: none;
+		margin: 0.5rem;
+		width: 90%;
+		min-height: 7rem;
+	}
 }