1. Added our revolution flag to the corner of the page celebrating ou…

…r victory ✊.

2. The projects cards images now have a fixed width on desktop.
3. Added a 2 column layout on tablets for the projects section.

index.html

@@ -96,6 +96,10 @@
 
         <div class="sideBarCloser" onpointerdown="toggleHamburgerMenu()"></div>
     </div>
+    <div class="syrian-flag">
+        <img alt="The Syrian revolution flag." src="images/syrian-flag.svg"
+             title="Freedom has prevailed! ✊">
+    </div>
 </header>
 
 <!--    Hero Section (Bio)-->
@@ -108,7 +112,7 @@ <h1>Hello I'm</h1>
             <h1 style="color: #765995">Ahmed Kinan Ghbash</h1>
             <h1>Front-End Developer</h1>
 
-            <p>
+            <p style="text-wrap: balance">
                 I specialize in crafting interactive, user-focused web experiences.
                 With a passion for detail and design, I bring ideas to life through clean and responsive code.
             </p>

styles/card-styles.css

@@ -4,6 +4,7 @@
     align-items: center;
     flex-wrap: wrap;
     justify-content: center;
+    justify-items: center;
     gap: var(--whole-page-margin);
     width: 90%;
 }
@@ -147,9 +148,23 @@
     right: 0;
 }
 
+/* 2 columns on tablets. */
+@media all and (min-width: 850px) {
+    .cards-container {
+        display: block;
+        columns: 2;
+        column-gap: 20px;
+    }
+
+    .card {
+        margin-bottom: 40px;
+    }
+}
+
 /* Horizontal cards on desktop. */
-@media all and (min-width: 800px) {
+@media all and (min-width: 1250px) {
     .cards-container {
+        display: flex;
         flex-direction: column;
     }
 
@@ -158,6 +173,7 @@
         min-width: 100%;
         display: flex;
         gap: 19px;
+        margin-bottom: unset;
     }
 
     .card-lower-part {
@@ -187,7 +203,7 @@
     }
 
     .card-image-container {
-        max-width: 35%;
+        width: 750px;
         border-radius: var(--image-border-radius-desktop);
     }
 

styles/header-styles.css

@@ -51,6 +51,25 @@
     display: none;
 }
 
+.syrian-flag {
+    user-select: none;
+    pointer-events: none;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 75px;
+}
+
+.syrian-flag > img {
+    width: 130px;
+    rotate: 45deg;
+    position: relative;
+    right: 13px;
+    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.1));
+    user-select: all;
+    pointer-events: all;
+}
+
 @media all and (max-width: 800px) {
     .header {
         flex-direction: column;
@@ -96,4 +115,9 @@
         top: 0;
         left: 0;
     }
+
+    .syrian-flag > img {
+        width: 100px;
+        right: -8px;
+    }
 }