fixes height of image in about page

Vizzuality · Aug 30, 2024 · 76d3c6d · 76d3c6d
1 parent aa7ffbe
commit 76d3c6d
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/src/containers/about/description/index.tsx b/src/containers/about/description/index.tsx
@@ -14,23 +14,25 @@ import {
 import { Separator } from '@/components/ui/separator';
 import Wrapper from '@/components/ui/wrapper';
 
+import ForestPerson from '../../../../public/images/forest-person.webp';
+
 export default function AboutDescription() {
   return (
     <Wrapper className="space-y-10">
-      <div className="space-y-4 md:grid md:grid-cols-12">
-        <p className="uppercase tracking-wide md:col-span-6">A Horizon Europe project</p>
-        <h2 className="text-xl font-semibold md:col-span-6 md:text-3xl">
+      <div className="space-y-4 lg:grid lg:grid-cols-12">
+        <p className="uppercase tracking-wide lg:col-span-6">A Horizon Europe project</p>
+        <h2 className="text-xl font-semibold lg:col-span-6 lg:text-3xl">
           Doing
           <br /> more
           <span className="font-thin">4</span>
           nature with citizen science
         </h2>
       </div>
-      <div className="items-end space-y-10 md:grid md:grid-cols-12">
-        <div className="relative h-[343px] md:col-span-5 md:h-[525px]">
-          <Image src="/images/forest-person.webp" alt="person in forest" fill />
+      <div className="items-end space-y-10 lg:grid lg:grid-cols-12">
+        <div className="relative lg:col-span-5">
+          <Image src={ForestPerson} alt="person in a forest" />
         </div>
-        <div className="space-y-4 leading-8 md:col-span-6 md:col-start-8">
+        <div className="space-y-4 leading-8 lg:col-span-6 lg:col-start-8">
           <p>
             more4nature is a Horizon Europe project funded under Food, Bioeconomy Natural Resources,
             Agriculture and Environment that started in January 2024, ending in December 2027,