From 15afbed43e754e7568ecc0e2d2b317813d556d55 Mon Sep 17 00:00:00 2001
From: Dilson's Pickles <a.dawson@mu.se>
Date: Tue, 22 Aug 2023 12:22:53 +1000
Subject: [PATCH] Responsive styling

---
 src/components/homepage/RecordAnything.astro | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/homepage/RecordAnything.astro b/src/components/homepage/RecordAnything.astro
index d83adeb..a488d2d 100644
--- a/src/components/homepage/RecordAnything.astro
+++ b/src/components/homepage/RecordAnything.astro
@@ -7,9 +7,9 @@ import RecordCursor from "../../assets/img/RecordCursor.png";
 ---
 
 <section class="bg-slate-50">
-  <div class="grid grid-cols-12 gap-8 max-w-screen-xl mx-auto py-20">
+  <div class="grid grid-cols-12 max-w-screen-xl mx-auto py-12">
     <div
-      class="flex flex-col justify-center gap-4 col-start-2 col-span-10 md:col-start-1 md:col-span-5"
+      class="flex flex-col justify-center gap-2 md:gap-4 col-start-2 col-span-10 md:col-start-2 md:col-span-4"
     >
       <h2 class="text-3xl md:text-5xl font-bold">Record anything</h2>
       <p class="text-base md:text-xl">
@@ -17,12 +17,13 @@ import RecordCursor from "../../assets/img/RecordCursor.png";
         All you need is a microphone.
       </p>
     </div>
+
     <div
-      class="col-start-2 col-span-10 md:col-span-6 lg:col-start-7 grid grid-cols-6 grid-rows-auto gap-4"
+      class="col-start-2 md:col-start-7 col-span-10 md:col-span-5 grid grid-cols-6 grid-rows-auto gap-4"
     >
       <div class="relative col-span-6 h-48">
-        <div class="absolute -right-8 md:-right-12 top-24 h-16 md:h-24 w-400">
-          <img class="h-full w-full rounded-lg" src={TransportTools} />
+        <div class="absolute -right-8 top-28 md:top-28 h-16 w-64 md:w-72">
+          <img class="object-fit rounded-lg" src={TransportTools} />
         </div><img
           class="object-cover object-top h-full w-full rounded-lg"
           src={RecordAnything}