fix: refactor howto backgrounds to not overlap text

src/pages/howto.astro

@@ -81,8 +81,8 @@ import tellTheWorld from '../assets/adopt/telltheworld.png';
     <Section
       sectionStyles="px-[1.5rem] lg:px-[3.5rem]"
       backgroundStyling="bg-[url('/images/background-images/choosingALicense-top.svg')] bg-contain bg-no-repeat bg-top w-full bottom-0 top-0 left-0 right-0 min-h-[20rem] z-0"
-      backgroundBottomStyling="bg-[url('/images/background-images/choosingALicense-bottom.svg')] bg-contain bg-no-repeat bg-bottom w-full bottom-0 left-0 right-0 min-h-[5rem] z-0 lg:min-h-[10rem]">
-      <div class="w-12/12 z-10 xl:w-8/12 py-[3rem] xl:pt-[11rem] xl:pb-[9rem]">
+      backgroundBottomStyling="bg-[url('/images/background-images/choosingALicense-bottom.svg')] bg-contain bg-no-repeat bg-bottom w-full bottom-0 left-0 right-0 min-h-[5rem] z-0 lg:min-h-[5.5rem] xl:min-h-[8rem]">
+      <div class="mt-[4rem] mb-[3rem] w-12/12 z-10 xl:w-8/12 py-[3rem] md:mt-[7rem] xl:my-0 xl:pt-[11rem] xl:pb-[9rem]">
         <span class="tag text-ltOrange">2. Choosing a License</span>
         <h2>Licensing is the heart of Fair Source</h2>
         <p class="mb-[1rem]">
@@ -98,8 +98,8 @@ import tellTheWorld from '../assets/adopt/telltheworld.png';
     </Section>
     <Section
       sectionStyles="py-[1.5rem] pl-[1.5rem] !justify-end xl:p-0 xl:pl-[3rem] xl:items-end"
-      backgroundStyling="bg-[url('/images/background-images/auditForSecrets.svg')] bg-contain bg-left bg-no-repeat w-full top-[1.5rem] right-auto left-[1.5rem] min-h-[20rem] bottom-[30%] xl:bg-right xl:top-[2.8rem] xl:right-[3rem] xl:left-auto xl:bottom-[1.5rem] xl:w-1/2">
-      <div class="relative mb-[1rem] h-[90%] min-h-[20rem] xl:mb-0 xl:min-h-[20rem] xl:w-1/2 flex justify-end items-end xl:order-12">
+      backgroundStyling="bg-[url('/images/background-images/auditForSecrets.svg')] bg-contain bg-top bg-no-repeat w-full top-[1.5rem] right-auto left-[1.5rem] min-h-[20rem] bottom-[45%] xl:bg-right xl:top-[2.875rem] xl:right-[3.125rem] xl:left-auto xl:bottom-[1.67rem] xl:w-1/2">
+      <div class="relative mb-[2rem] h-full min-h-[20rem] xl:mb-0 xl:min-h-[20rem] xl:w-1/2 flex justify-end items-end xl:order-12">
         <Image src={auditForSecretsImage} alt="Audit For Secrets" densities={[1.5, 2]} class="relative max-h-[30rem] w-auto xl:max-h-[35rem]" />
       </div>
       <div class="relative h-1/2 w-12/12 xl:h-full xl:w-1/2 xl:pt-[12.19rem] xl:pb-[12.56rem]">
@@ -114,8 +114,8 @@ import tellTheWorld from '../assets/adopt/telltheworld.png';
     <Section
       sectionStyles="px-[1.5rem] items-stretch xl:pr-[3.5rem] xl:pl-0"
       backgroundStyling="bg-[url('/images/background-images/publishYourRepo-top.svg')] bg-contain bg-no-repeat bg-right w-full top-0 right-0 xl:right-[4.75rem] min-h-[13rem] z-0"
-      backgroundBottomStyling="bg-[url('/images/background-images/publishYourRepo-bottom.svg')] bg-contain bg-no-repeat bg-left w-1/2 bottom-[30%] left-0 h-full z-0 xl:min-h-[20rem] xl:bg-left xl:bottom-0">
-      <div class="flex items-center w-12/12 z-10 xl:w-5/12">
+      backgroundBottomStyling="bg-[url('/images/background-images/publishYourRepo-bottom.svg')] bg-contain bg-no-repeat bg-center w-1/2 bottom-[30%] left-0 h-full z-0 xl:min-h-[20rem] xl:bg-left xl:bottom-0">
+      <div class="flex items-center mb-[2rem] w-12/12 z-10 xl:w-5/12">
         <Image src={publishYourRepoImage} alt="Publish Your Repo" densities={[1.5, 2]} class="relative xl:min-w-[30rem]" />
       </div>
       <div class="w-12/12 xl:w-7/12 xl:py-[13.81rem]">
@@ -125,9 +125,9 @@ import tellTheWorld from '../assets/adopt/telltheworld.png';
     </Section>
     <Section
       sectionStyles="p-[1.5rem] items-stretch xl:px-[3.5rem]"
-      backgroundStyling="bg-[url('/images/background-images/tellTheWorld.svg')] bg-contain bg-no-repeat bg-right w-full top-0 bottom-[30%] right-0 xl:bottom-0 xl:w-5/15 z-0">
-      <div class="relative flex items-center min-h-[20rem] w-full z-10 xl:w-5/12 xl:order-12"></div>
-      <div class="w-12/12 xl:w-7/12 xl:pt-[11.62rem] xl:pb-[13.75rem] z-10">
+      backgroundStyling="bg-[url('/images/background-images/tellTheWorld.svg')] bg-contain bg-no-repeat bg-right w-full top-0 bottom-[60%] right-0 md:bottom-[40%] xl:bottom-0 xl:w-5/15 z-0">
+      <div class="relative flex items-center mb-[2rem] min-h-[20rem] w-full z-10 xl:w-5/12 xl:order-12"></div>
+      <div class="w-12/12 xl:w-7/12 xl:pr-[1rem] xl:pt-[11.62rem] xl:pb-[13.75rem] z-10">
         <span class="tag text-rust">5. Tell the World</span>
         <h2>Let’s spread the word together!</h2>
         <p>Use the fair-source repo topic on
@@ -141,7 +141,7 @@ import tellTheWorld from '../assets/adopt/telltheworld.png';
       sectionStyles="!bg-taupe px-[1.5rem] min-h-[20rem] lg:px-[3.5rem]"
       backgroundStyling="bg-[url('/images/background-images/moreHelp-top.svg')] bg-contain bg-no-repeat bg-left h-full top-0 bottom-0 left-0 w-1/2 z-0"
       backgroundBottomStyling="bg-[url('/images/background-images/moreHelp-bottom.svg')] bg-contain bg-no-repeat bg-right bottom-0 right-0 h-full w-1/2 z-0">
-      <div class="w-12/12 xl:w-1/2 xl:py-[13.19rem]">
+      <div class="w-12/12 md:w-1/2 xl:py-[13.19rem]">
         <h2 class="text-center">Want some more help?</h2>
         <p class="text-center">Reach out to us at <a href="" target="_BLANK" class="emphasized">Github</a> or <a href="" target="_BLANK" class="emphasized">Twitter</a> if you’ve got more questions. We’re happy to help!</p>
       </div>