From e448eb85085b4560722485e4dccc7ed966487bb1 Mon Sep 17 00:00:00 2001
From: zepp <zepp@zepps.cafe>
Date: Thu, 2 Jan 2025 10:06:21 -0500
Subject: [PATCH] styling loveletter.php

---
 loveletter.php  | 26 +++++++++-----------------
 style/style.css | 20 +++++++++++++-------
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/loveletter.php b/loveletter.php
index 5c5d5f3..93121e3 100644
--- a/loveletter.php
+++ b/loveletter.php
@@ -19,23 +19,15 @@
             Small showcases of the love that was to be ever present as you grew.
           </p>
           <div>
-            <figure>
               <img class="cards" src="img/card-one.webp" alt="A young kitten era photo of Baxter. Laying his head against the arm of the couch.">
-            </figure>
-            <figure>
               <img class="cards" src="./img/baxter-window.jpg" alt="A young kitten era photo of baxter. He is lodged between the window and the screen for the window while it is open on a summer day.">
-            </figure>
-            <figure>
               <img class="cards" src="img/card-two.webp" alt="A young kitten era photo of Baxter. Flopped upside down on the couch and semi curled up.">
-            </figure>
-            <figure>
               <img class="cards" src="img/card-three.webp" alt="A young kitten era photo of Baxter. Partialy curled up sleeping on the couch.">
-            </figure>
           </div>
       </section>
-      <section>
-        <h2>Stuck in the middle with you...</h2>
-        <div class="middle-years-text">
+
+      <section class="young-adult-baxter">
+        <h3>Stuck in the middle with you...</h3>
           <p>
             As you reached a young adult, more of who you really were started to show. When we got our own place I saw so many
             new sides of you I had never yet seen. You loved sunbathing in the windows in the morning, I'd have my cup of coffee
@@ -43,14 +35,14 @@
             When the world got uncertain, I knew you were always at home waiting for me. When I was uncertain about life, I always knew
             you were the reason to keep going, to keep the fire lit.
           </p>
-        </div>
-        <div class="middle-years-pictures">
-          <img class="cards" src="img/card-five.webp" alt="My cat Baxter laying against a wall looking at the camera.">
-          <img class="cards" src="img/card-six.webp" alt="My cat Baxter laying in bed tucked under a blanket sleeping.">
-          <img class="cards" src="img/card-seven.webp" alt="My cat Baxter curled up in a box looking up at the camera.">
-          <img class="cards" src="img/card-eight.webp" alt="My cat Baxter stretched out on the floor flipped upside down, exposing his stomach.">
+        <div> 
+            <img class="cards" src="./img/baxter-floor-apartment.jpg" alt="My cat Baxter laying against a wall looking at the camera.">
+            <img class="cards" src="img/card-six.webp" alt="My cat Baxter laying in bed tucked under a blanket sleeping.">
+           <img class="cards" src="img/card-seven.webp" alt="My cat Baxter curled up in a box looking up at the camera.">
+            <img class="cards" src="img/card-eight.webp" alt="My cat Baxter stretched out on the floor flipped upside down, exposing his stomach.">
         </div>
       </section>
+
       <section>
         <h2>And here we are...</h2>
         <div class="current-years-text">
diff --git a/style/style.css b/style/style.css
index fb680d9..c4f4e7e 100644
--- a/style/style.css
+++ b/style/style.css
@@ -94,24 +94,30 @@ main {
 	text-align: center;
 }
 
-.favorite-baxter-photos img, .growing-up img {
+.growing-up figure, .young-adult-baxter figure {
+	height: 50vh;
+	width: auto;
+}
+
+.favorite-baxter-photos img, .growing-up img, .young-adult-baxter img {
 	max-width: 100%;
 	max-height: 100%;
 	object-fit: fill;
 }
 
-.growing-up h3, .growing-up p {
+.growing-up h3, .young-adult-baxter h3, .growing-up p, .young-adult-baxter p {
 	padding: 1rem;
 	font-size: 1.25rem;
 }
 
-.growing-up div {
+.growing-up div, .young-adult-baxter div {
 	padding-top: 2rem;
+	height: 100%;
+	width: auto;
 	display: grid;
-	grid-template-rows: 22.5rem 15rem;
-	grid-template-columns: 25rem 25rem;
-	justify-content: space-evenly;
-	align-items: baseline;
+	grid-template-columns: 27vw 27vw;
+	align-items: stretch;
+	gap: 2rem;
 }
 
 header {