Responsive styling for element details

src/app/elements/components/element-detail/element-detail.component.scss

@@ -1,11 +1,8 @@
-
 .element-header {
   display: flex;
   justify-content: space-between;
   margin: auto;
   margin-bottom: 20px;
-  width: 60vw;
-  max-width: 1000px;
 }
 
 .element-title {
@@ -70,7 +67,7 @@
         top: 50%;
         left: 50%;
         transform: translate(-50%,-50%);
-        font-size: 64px;
+        font-size: 86px;
         font-weight: 400;
         text-align: center;
         margin: 0px;
@@ -162,4 +159,87 @@
   40% { transform: translateY(0); }
   60% { transform: translateY(-10px); }
   80% { transform: translateY(0); }
+}
+
+@media only screen and (max-width: 1250px) {
+  .element-info {
+    .row-one {
+      .element-card {
+        h2 {
+          font-size: 64px;
+        }
+
+        p {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  .element-details {
+    width: auto;
+  }
+
+  .element-info {
+    .row-one {
+      .element-card {
+        .element-card-footer {
+          gap: 4px;
+          padding-bottom: 4px;
+        }
+
+        h2 {
+          font-size: 48px;
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 900px) {
+  .element-info {
+    .row-one {
+      .element-card {
+        width: 20vw;
+        height: 20vw;
+
+        h2 {
+          font-size: 64px;
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 700px) {
+  .element-info {
+    .row-one {
+      .element-card {
+        h2 {
+          font-size: 48px;
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .element-info {
+    .row-one {
+      flex-direction: column;
+      align-items: center;
+
+      .element-card {
+        max-width: 265px;
+        width: 90vw;
+        height: 90vw;
+
+        h2 {
+          font-size: 48px;
+        }
+      }
+    }
+  }
 }