Front end Project done

INFO-1252 (Front End Dev)/Projects/Final Project/css/style.css

@@ -11,7 +11,7 @@
     }
 }
 
-/* Mobile-first design */
+/* Mobile design */
 body {
     font-family: Arial, Helvetica, sans-serif;
     background: #f8f9fa;
@@ -21,12 +21,20 @@ body {
 }
 
 h1,
-h2,
-h3 {
+h2 {
     margin-top: 1rem;
     margin-bottom: 0.5rem;
 }
 
+h3 {
+    font-size: 1.6rem;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    margin-bottom: 0.75rem;
+    padding-bottom: 0.4rem;
+    border-bottom: 3px solid #444;
+}
+
 nav ul {
     display: flex;
     flex-direction: column;
@@ -58,7 +66,7 @@ section {
     padding: 1rem;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05);
-    animation: fadeIn 1s ease
+    animation: fadeIn 1s ease;
 }
 
 section img {
@@ -66,6 +74,7 @@ section img {
     height: auto;
     border-radius: 8px;
     margin-bottom: 0.5rem;
+    display: block;
 }
 
 form {
@@ -107,7 +116,14 @@ footer {
     font-size: 0.95rem;
 }
 
-/* Layout for larger screens */
+.animal-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 3rem;
+}
+
+/* Layouts for larger screens */
+/* Tablet/Medium screen */
 @media (min-width: 600px) and (max-width: 899px) {
     body {
         padding: 0 2rem;
@@ -131,6 +147,7 @@ footer {
     }
 }
 
+/* Desktop/large Screen */
 @media (min-width: 900px) {
     body {
         padding: 0 4rem;
@@ -152,4 +169,8 @@ footer {
     h1 {
         font-size: 3rem;
     }
+
+    .animal-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
 }