Changed layout, taht everything is max 1200px width and centered

src/app/layout/app/app.component.html

@@ -1,6 +1,6 @@
 <app-topbar />
 
-<main class="container app-surface">
+<main class="algo-container app-surface">
   <router-outlet />
 </main>
 

src/app/pages/algorithms/algorithms.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="algo-container">
   <h1>{{ 'ALGORITHM.TITLE' |translate }}</h1>
   <div class="category-cards">
 @for (category of categories$ | async; track category.id) {

src/app/pages/algorithms/conway-gol/conway-gol.component.html

@@ -1,4 +1,4 @@
-<mat-card class="container">
+<mat-card class="algo-container">
   <mat-card-header>
     <mat-card-title>{{ 'GOL.TITLE' | translate }}</mat-card-title>
   </mat-card-header>

src/app/pages/algorithms/fractal/fractal.component.html

@@ -1,4 +1,4 @@
-<mat-card class="container">
+<mat-card class="algo-container">
   <mat-card-header>
     <mat-card-title>{{ 'FRACTAL.TITLE' | translate }}</mat-card-title>
   </mat-card-header>

src/app/pages/algorithms/fractal3d/fractal3d.component.html

@@ -1,4 +1,4 @@
-<mat-card class="container">
+<mat-card class="algo-container">
   <mat-card-header>
     <mat-card-title>{{ 'FRACTAL3D.TITLE' | translate }}</mat-card-title>
   </mat-card-header>

src/app/pages/algorithms/pathfinding/labyrinth/labyrinth.component.html

@@ -1,4 +1,4 @@
-<mat-card class="container">
+<mat-card class="algo-container">
   <mat-card-header>
     <mat-card-title>{{ 'LABYRINTH.TITLE' | translate }}</mat-card-title>
   </mat-card-header>

src/app/pages/algorithms/pathfinding/pathfinding.component.html

@@ -1,4 +1,4 @@
-<mat-card class="container">
+<mat-card class="algo-container">
   <mat-card-header>
     <mat-card-title>{{ 'PATHFINDING.TITLE' | translate }}</mat-card-title>
   </mat-card-header>

src/app/pages/algorithms/pendulum/pendulum.component.html

@@ -1,4 +1,4 @@
-<mat-card class="container">
+<mat-card class="algo-container">
   <mat-card-header>
     <mat-card-title>{{ 'PENDULUM.TITLE' | translate }}</mat-card-title>
   </mat-card-header>

src/app/pages/algorithms/sorting/sorting.component.html

@@ -1,4 +1,4 @@
-<mat-card class="container sorting-card">
+<mat-card class="algo-container sorting-card">
     <mat-card-header>
       <mat-card-title>{{ 'SORTING.TITLE' | translate }}</mat-card-title>
     </mat-card-header>

src/styles.scss

@@ -21,6 +21,7 @@ $dark-theme: mat.define-theme((color: (theme-type: dark, primary: mat.$cyan-pale
 
 /* ---- Custom variables ---- */
 :root {
+  --app-maxWidth: 1200px;
   --app-bg: #{mat.get-theme-color($light-theme, surface-container-low)};
   --app-fg: #{mat.get-theme-color($light-theme, on-surface)};
   --app-logo-bg: #313131;
@@ -118,7 +119,7 @@ a {
     box-shadow 200ms ease,
     transform 200ms ease;
 
-  &.container {
+  &.algo-container {
     width: 100%;
     max-width: 1920px;
     padding: 20px;
@@ -228,8 +229,11 @@ a {
 
 // algos
 
-.container {
+.algo-container {
-  padding: 2rem;
+  width: 100%;
+  max-width: var(--app-maxWidth);
+  margin: 0 auto;
+  padding: clamp(1rem, 4vw, 2rem);
 }
 
 .algo-info {
@@ -398,7 +402,7 @@ canvas {
 
 .layout-container {
   width: 100%;
-  max-width: 1920px;
+  max-width: var(--app-maxWidth);
   margin: 0 auto;
   padding: clamp(1rem, 4vw, 2rem);
 }
@@ -468,27 +472,35 @@ app-root {
 .imprint {
   display: grid;
   gap: clamp(1rem, 3vw, 1.5rem);
-  max-width: 1200px;
+  max-width: var(--app-maxWidth);
   margin: 0 auto;
 }
 
 .hero {
-  display: flex;
+  display: block;
-  flex-wrap: wrap;
-  gap: clamp(1rem, 4vw, 1.5rem);
   border-radius: var(--card-radius);
   background: var(--card-bg);
   padding: clamp(1rem, 3vw, 1.5rem);
+  overflow: hidden;
 }
 
 .hero .photo {
-  display: flex;
+  float: left;
-  align-items: flex-start;
+  margin-right: clamp(1rem, 4vw, 1.5rem);
-  justify-content: flex-start;
+  margin-bottom: 0.5rem;
-  flex: 0 1 425px;
   max-width: 100%;
 }
 
+@media (max-width: 720px) {
+  .hero .photo {
+    float: none;
+    margin-right: 0;
+    margin-bottom: 1rem;
+    display: flex;
+    justify-content: center;
+  }
+}
+
 .hero .photo img {
   display: block;
   width: 100%;
@@ -500,20 +512,18 @@ app-root {
 }
 
 .hero .intro {
-  display: flex;
+  display: block;
-  flex-direction: column;
-  gap: clamp(0.5rem, 2vw, 1rem);
-  flex: 1 1 300px;
 }
 
 .hero .intro h1 {
-  margin-top: .25rem;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
   font-size: clamp(1.5rem, 5vw, 2.5rem);
 }
 
 .hero .intro .lead {
   opacity: .9;
-  margin: .25rem 0 0.5rem;
+  margin: 0.5rem 0 1rem;
   font-size: clamp(1rem, 2.5vw, 1.15rem);
 }
 
@@ -686,7 +696,7 @@ app-root {
   display: grid;
   gap: clamp(1rem, 3vw, 1.5rem);
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 450px), 1fr));
-  max-width: 1200px;
+  max-width: var(--app-maxWidth);
   margin: 0 auto;
 }
 
@@ -702,7 +712,9 @@ app-root {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }
 
-
+.project-card.featured {
+  grid-column: 1 / -1;
+}
 
 .project-card mat-card-header {
   padding-bottom: 1rem;