Fix mobile space

src/components/energy/section-2/index.tsx

@@ -37,33 +37,33 @@ export default function Section2() {
               rotate={step !== 'section-2-step-2'}
             />
           </div>
-          <div className="w-full xl:w-1/2 flex flex-col justify-center max-xl:container">
+          <div className="w-full max-xl:max-h-[60vh] xl:h-full xl:w-1/2 flex flex-col xl:justify-center max-xl:container max-xl:pt-10">
             <AnimatePresence>
               {step !== 'section-2-step-2' ? <motion.div
                 key="section-2-description-1"
                 initial={{ opacity: 0, translateY: '200px' }}
                 animate={{ opacity: 1, translateY: 0, transition }}
-                className='space-y-6 max-w-[480px]'
+                className='space-y-3 xl:space-y-6 max-w-[480px]'
               >
-                <div className='text-[32px]'>
+                <div className='text-xl xl:text-[32px]'>
                   Digital twins are revolutionising the way to approach wind farm development and energy management.
                 </div>
-                <p>
+                <p className='text-sm leading-tight'>
                   By allowing users to perform simulations that replicate real-world conditions, digital twins can help energy practitioners to map the wind potential of different regions, optimise the location of wind turbines, and predict energy generation.
                 </p>
-                <p>
+                <p className='text-sm leading-tight'>
                   The energy output of a wind turbine depends on a variety of factors, the most important being the wind speed at the height at which the turbines are placed. Current state-of-the-art models only provide wind information at 10 metres, whereas wind turbines are normally placed at around 100 metres height, and this requires an interpolation to convert wind speed from 10 to 100 metres.
                 </p>
               </motion.div> : <motion.div
                 key="section-2-description-2"
                 initial={{ opacity: 0, translateY: '200px' }}
                 animate={{ opacity: 1, translateY: 0, transition }}
-                className='space-y-6 max-w-[480px]'
+                className='space-y-4 xl:space-y-6 max-w-[480px]'
               >
-                <p>
+                <p className='text-sm leading-tight'>
                   A wind turbine has a specific power curve that is provided by the manufacturer and depends on several factors (e.g. rotor diameter, rated wind speed, etc.). The measure of how much energy a turbine produces compared to its maximum theoretical output, over a certain period of time, is what is called capacity factor. This is a more meaningful variable to the energy industry than wind speed or energy density. Therefore, it is crucial for energy companies to get access to information about the capacity factor to be able to assess energy supply and meet the demand.
                 </p>
-                <p>
+                <p className='text-sm leading-tight'>
                   Classic energy models require full time series to generate histograms of the capacity factor, which makes using the outputs of the digital twin challenging. However, a streaming setup allows histograms to be built on the fly. This functionality greatly facilitates the interactivity between the results from the climate models with impact model applications, such as applications used by the energy sector.
                 </p>
               </motion.div>}