Update responsive styles and class names for consistency

Refactored multiple components to improve responsive design, ensuring better usability on smaller screens. Standardized class names for clarity and consistency, and adjusted layouts and styles to enhance overall alignment and accessibility.

frontend/src/app/pages/home/home.component.html

@@ -50,7 +50,7 @@
     <section class="darkmodeSection">
       <div class="container" style="padding: 10px 0 80px 0">
         <iframe id="discord-widget" src="https://discordapp.com/widget?id=141644560005595136&theme=dark"></iframe>
-        <div class="paragraph" id="discordp">
+        <div class="paragraph" id="discord-p">
           <h2>Meet the Community</h2>
           <p>Altitude is home to players young and old from all around the globe, and here, everyone is family. Altitude
             is your place to get together with friends and relax - and maybe enjoy some survival too. Altitude is
@@ -106,7 +106,7 @@
         </div>
       </div>
     </section>
-    <section class="removemobile darkmodeSection">
+    <section class="remove-mobile darkmodeSection">
       <div class="customContainer">
         <h2 style="padding-bottom: 35px; font-size: 2.8em;">Community Builds</h2>
         <p style="padding-bottom: 35px; font-size: 1.1em; margin: auto;">Thank you to our brilliant players for sharing

frontend/src/app/pages/home/home.component.scss

@@ -287,27 +287,23 @@ main .container {
   .container, .customContainer {
     width: 90%;
   }
-
-  #header-img {
-    width: 45%;
-  }
 }
 
 @media (max-width: 900px) {
-  .removemobile {
+  .remove-mobile {
     display: none;
   }
 }
 
 @media (max-width: 690px) {
-  #discordwidget {
+  #discord-widget {
     margin: 0 auto;
     width: 60%;
     max-width: 380px;
     height: 400px;
   }
 
-  #discordp {
+  #discord-p {
     margin: 50px auto;
   }