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

---
 src/components/homepage/RecordAnything.astro | 30 +++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/homepage/RecordAnything.astro b/src/components/homepage/RecordAnything.astro
index 67ad7c8..d83adeb 100644
--- a/src/components/homepage/RecordAnything.astro
+++ b/src/components/homepage/RecordAnything.astro
@@ -1,30 +1,40 @@
 ---
 import RecordAnything from "../../assets/img/record-anyting.jpg";
-import RecordAnything2 from '../../assets/img/RecordAnything2.jpg'
+import RecordAnything2 from "../../assets/img/RecordAnything2.jpg";
 import Waveform from "../../assets/img/waveform.png";
 import TransportTools from "../../assets/img/TransportTools.png";
-import RecordCursor from '../../assets/img/RecordCursor.png'
+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="flex flex-col justify-center gap-4 col-start-1 col-span-5">
-      <h2 class="text-5xl font-bold">Record anything</h2><p class="text-xl">
+    <div
+      class="flex flex-col justify-center gap-4 col-start-2 col-span-10 md:col-start-1 md:col-span-5"
+    >
+      <h2 class="text-3xl md:text-5xl font-bold">Record anything</h2>
+      <p class="text-base md:text-xl">
         Excellent for podcasts, voice-over work or even just recording memos.
         All you need is a microphone.
       </p>
     </div>
-    <div class="col-start-7 col-end-13 grid grid-cols-6 grid-rows-auto gap-4">
+    <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"
+    >
       <div class="relative col-span-6 h-48">
-        <div class="absolute -right-12 top-24 h-24 w-400">
+        <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><img class="object-cover object-top h-full w-full rounded-lg" src={RecordAnything} />
+        </div><img
+          class="object-cover object-top h-full w-full rounded-lg"
+          src={RecordAnything}
+        />
       </div>
-      <div class="relative row-start-2 col-span-3 h-48">
-        <div class="absolute -right-3 bottom-0"><img class="w-full h-52 object-cover" src={RecordCursor}/></div>
+      <div class="relative row-start-2 col-span-3 hidden md:block h-48">
+        <div class="absolute -right-3 bottom-0">
+          <img class="w-full h-52 object-cover" src={RecordCursor} />
+        </div>
         <img class="h-full w-full rounded-lg" src={Waveform} />
       </div>
-      <div class="row-start-2 col-span-3 h-48">
+      <div class="row-start-2 col-span-3 h-48 hidden md:block ">
         <img class="h-full w-full rounded-lg" src={RecordAnything2} />
       </div>
     </div>