further index.php styling

index.php

@@ -34,8 +34,9 @@
 
       </section>
     
+     <h3 class="facts-header">Baxter facts!</h3>
+
       <section class="baxter-info">
-        <h3 class="facts-header">Baxter facts!</h3>
         <div class="baxter-is">  
           <p>Baxter is:</p>
             <ul>
@@ -74,8 +75,9 @@
           </div>
       </section>
     
+      <h3>My favorite photos of Baxter</h3>
+      
       <section class="favorite-baxter-photos">
-        <h3>My favorite photos of Baxter</h3>
         <figure>
             <img src="./img/posed-baxter.jpg" alt="My cat Baxter laying on my chest over a blanket in bed looking at the camera. The many details and patterns of his mackeral tabby fur pattern are fully visible">
 

style/style.css

@@ -8,19 +8,27 @@ html {
 	font-size: 16px;
 }
 
-main {
+body {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 }
 
+main {
+	margin: 2rem 0 2rem 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 2rem;
+	width: 50rem;
+	height: auto;
+}
+
 .welcome-section {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	gap: 2rem;
-	width: 50rem;
-	height: auto;
 }
 
 .baxter-info {
@@ -29,8 +37,6 @@ main {
 	grid-template-columns: 1fr 1fr;
 	justify-items: center;
 	gap: 2rem;
-	width: 50rem;
-	height: auto;
 }
 
 .baxter-info p {
@@ -58,3 +64,22 @@ main {
 	grid-row: 2/3;
 	padding-left: 5rem;
 }
+
+.favorite-baxter-photos {
+	display: grid;
+	grid-template-rows: 25rem 25rem;
+	grid-template-columns: 20rem 20rem;
+	justify-items: center;
+}
+
+.favorite-baxter-photos figure {
+	height: 20rem;
+	width: 15rem;
+	text-wrap: wrap;
+}
+
+.favorite-baxter-photos img {
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: fill;
+}