Fixed hero page

src/app/pages/about/about.component.html

@@ -1,5 +1,6 @@
 <section class="about">
   <mat-card class="hero">
+    <div class="hero-flex-container">
       <div class="photo">
         <img [ngSrc]="AssetsConstants.ME" width="421" height="512" alt="{{ 'ABOUT.ALT.PROFILE' | translate }}"
           draggable="false" oncontextmenu="return false;" priority />
@@ -35,6 +36,7 @@
           </div>
         </div>
       </div>
+    </div>
   </mat-card>
 
   <mat-card class="skills">

src/styles.scss

@@ -477,28 +477,22 @@ app-root {
 }
 
 .hero {
-  display: block;
   border-radius: var(--card-radius);
   background: var(--card-bg);
-  padding: clamp(1rem, 3vw, 1.5rem);
   overflow: hidden;
 }
 
-.hero .photo {
+.hero-flex-container {
-  float: left;
+  display: flex;
-  margin-right: clamp(1rem, 4vw, 1.5rem);
+  flex-wrap: wrap;
-  margin-bottom: 0.5rem;
+  gap: clamp(1rem, 4vw, 2rem);
-  max-width: 100%;
+  padding: clamp(1rem, 3vw, 1.5rem);
+  align-items: flex-start;
 }
 
-@media (max-width: 720px) {
+.hero .photo {
-  .hero .photo {
+  flex: 0 0 auto;
-    float: none;
+  max-width: 100%;
-    margin-right: 0;
-    margin-bottom: 1rem;
-    display: flex;
-    justify-content: center;
-  }
 }
 
 .hero .photo img {
@@ -512,7 +506,23 @@ app-root {
 }
 
 .hero .intro {
-  display: block;
+  flex: 1 1 400px;
+}
+
+@media (max-width: 850px) {
+  .hero-flex-container {
+    justify-content: center;
+  }
+
+  .hero .photo {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .hero .intro {
+    flex-basis: 100%;
+  }
 }
 
 .hero .intro h1 {