Restructured Introduction Card to be responsive without media query

Author: linkdotnet

src/LinkDotNet.Blog.Web/Shared/IntroductionCard.razor.css

@@ -7,10 +7,14 @@
 .introduction-container {
     height: 438px;
     display: grid;
-    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 0.5fr 1fr 1fr 1fr;
     gap: 10px;
-    grid-template-areas: ". . . . . ." ". profile-picture profile-text profile-text profile-text ." ". . . . . .";
+    grid-template-areas:
+    ". . . . ."
+    ". . profile-picture . ."
+    ". profile-text profile-text profile-text ."
+    ". profile-text profile-text profile-text .";
 }
 
 .profile-picture {
@@ -33,21 +37,5 @@
     font-size: clamp(0.9rem, 0.6479rem + 1.1268vw, 1.5rem);
     color: var(--text-color-inverted);
     line-height: clamp(1.5em, 0.6479rem + 1.1268vw, 2.25em);
-}
-
-@media only screen and (max-width: 700px) {
-    .introduction-container {
-        grid-template-columns: .5fr 1fr 1fr 1fr 1fr .5fr;
-        grid-template-rows: 1fr 1fr 1fr 1fr;
-        grid-template-areas:
-      ". . . . ." 
-      ". . profile-picture profile-picture . ."
-      ". profile-text profile-text profile-text profile-text ."
-      ". profile-text profile-text profile-text profile-text .";
-    }
-
-    .introduction-container .profile-picture {
-        margin-block: auto;
-        margin-left: 0;
-    }
+    text-align: center
 }