From 18bef40af883632f3fe251cd7c1502726b4234eb Mon Sep 17 00:00:00 2001
From: zepp <zepp@zepps.cafe>
Date: Wed, 1 Jan 2025 07:59:23 -0500
Subject: [PATCH] further index.php styling

---
 index.php       |  6 ++++--
 style/style.css | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/index.php b/index.php
index 586a485..58e2baa 100644
--- a/index.php
+++ b/index.php
@@ -33,9 +33,10 @@
           </p>
 
       </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>
@@ -73,9 +74,10 @@
             </ul>
           </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">
 
diff --git a/style/style.css b/style/style.css
index 2d88c45..6b0ebb7 100644
--- a/style/style.css
+++ b/style/style.css
@@ -64,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;
+}