styles corrected for medium and small screens according to design

algrtm/src/components/PianoRollDescription.js

@@ -6,18 +6,18 @@ import React from "react";
 const PianoRollDescription = () => {
   const { darkMode } = useTheme();
   return (
-    <section className="flex flex-col items-center justify-center w-full xl:px-[12.625rem] mt-[4rem] md:mt-[3.94rem]">
-      <div className="lg:flex-row flex flex-col gap-[4.5rem] items-center justify-center w-full">
+    <section className="flex flex-col items-center justify-center w-full xl:px-[12.625rem]">
+      <div className="lg:flex-row flex flex-col gap-[4rem] lg:gap-[4.5rem] items-center justify-center w-full">
         <div className="flex flex-col gap-4 max-w-[24.03rem] w-full">
-          <h1 className="h2 leading-[4.48rem] xl:h1 text-neutralLight-neutral10 dark:text-neutralDark-neutral10 ">
+          <h1 className="h4 tracking-[-0.11rem] lg:h2SB lg:tracking-[-0.13rem] xl:h2 xl:tracking-[-0.16rem] text-neutralLight-neutral10 dark:text-neutralDark-neutral10 ">
             PianoRoll
           </h1>
-          <div className="h6 text-neutralLight-neutral20 dark:text-neutralDark-neutral20 flex flex-col gap-[1rem]">
-            <p className="h5_500">
+          <div className="text-neutralLight-neutral20 dark:text-neutralDark-neutral20 flex flex-col gap-[1rem]">
+            <p className="h5_smaller lg:5h_small xl:h5_500">
               PianoRoll is a platform for tracking effort and hosting piano
               competitions.
             </p>
-            <p>
+            <p className="h6_small xl:h6">
               PianoRoll users provide crowd-sourced, high-quality MIDI
               recordings rich with performance nuances. This allows us to curate
               datasets for cutting-edge machine learning research.

algrtm/src/components/PianoRollLogoDescription.js

@@ -3,18 +3,18 @@ import React from "react";
 
 const PianoRollLogoDescription = () => {
   return (
-    <div className="lg:flex-row flex flex-col max-w-[64.75rem] items-center gap-[2rem] md:gap-[4.5rem] my-[7.19rem] px-4">
+    <div className="lg:flex-row flex flex-col max-w-[64.75rem] items-center gap-[2.75rem] lg:gap-[4.5rem] my-[4rem] md:my-[7.19rem">
       <div className="bg-neutralLight-neutral90 rounded-[2rem] w-full md:w-[36.25rem] h-[29.875rem] flex flex-col md:flex-row justify-center items-center gap-[0.625rem]">
         <Image width={86.965} height={94} src="/pianoRollLogo.svg" />
         <Image width={218.057} height={38.198} src="/PianoRoll.svg" />
       </div>
       <div className="flex flex-col gap-[0.625rem] items-start w-full md:w-auto max-w-[24rem]">
-        <p className="h5_500 text-neutralLight-neutral10">
+        <p className="h5_smaller text-neutralLight-neutral10">
           Audio, images and text already benefit from well-established deep
           learning architectures and processing pipelines that consistently
           yield amazing results.
         </p>
-        <p className="text-neutralLight-neutral10">
+        <p className=" h6_small text-neutralLight-neutral10">
           Recording piano performances in MIDI format introduces a new and
           exciting area of research, combining challenges from text, image and
           audio into a single modality. MIDI format services as a bridge,

algrtm/src/components/PydataTalkComponent.js

@@ -6,8 +6,10 @@ const PydataTalkComponent = () => {
   return (
     <section className="flex flex-col items-center gap-[2.75rem] md:gap-[5.88rem] my-[4rem] md:my-[7.19rem] w-full">
       <div className="flex flex-col gap-[1.5rem] text-neutralLight-neutral10 dark:text-neutralDark-neutral10 h5_small lg:h5_500 md:px-[7.75rem] xl:px-[4rem] items-center max-w-[51.875rem] w-full">
-        <h2 className="h2">Pydata Talk</h2>
-        <h6 className="h6_400">
+        <h2 className="h2SB tracking-[-0.13rem] xl:h2 xl:tracking-[-0.16rem]">
+          Pydata Talk
+        </h2>
+        <h6 className="h6 text-center">
           We presented at PyData London 2024. Check out our speech on modeling
           the emotional nuances of music performances.
         </h6>

algrtm/src/components/PythonToolsSection.js

@@ -4,33 +4,33 @@ import pythonToolsData from "@/data/pythonToolsData";
 
 const PythonToolsSection = () => {
   return (
-    <section className="w-full flex flex-col gap-[4.5rem] justify-center items-center text-center mt-[2.75rem] px-[1rem] md:px-[4.56rem] xl:px-[5.88rem] bg-neutralLight-neutral100 dark:bg-neutralDark-neutral100">
-      <h4 className="h4 lg:h2 text-neutralLight-neutral10 dark:text-neutralDark-neutral10 self-start md:self-center max-w-[45rem]">
+    <section className="w-full flex flex-col gap-[0.75rem] lg:gap-[4rem]justify-center items-center text-center mt-[4rem] lg:mt-[2.75rem] px-[0] lg:px-[1rem] md:px-[4.56rem] xl:px-[5.88rem] bg-neutralLight-neutral100 dark:bg-neutralDark-neutral100">
+      <h4 className="h4 tracking-[-0.11rem] lg:h2 text-neutralLight-neutral10 dark:text-neutralDark-neutral10 self-start md:self-center max-w-[45rem] w-full">
         Python Tools for MIDI Processing
       </h4>
-      <div className="flex flex-wrap justify-center items-center w-full gap-[1.5rem] md:gap-[2rem] mt-[2rem]">
+      <div className="flex flex-col lg:flex-row justify-center items-center w-full gap-[1.5rem] md:gap-[2rem] mt-[2rem]">
         {Object.values(pythonToolsData).map((tool, index) => (
           <div
             key={index}
-            className="flex flex-col justify-start items-center w-full sm:w-full md:w-[calc(50%-1rem)] lg:w-[calc(33.333%-2rem)] h-[35rem] bg-neutralLight-neutral90 dark:bg-neutralDark-neutral90 rounded-[2rem] overflow-hidden"
+            className="flex flex-col lg:flex justify-start items-center w-full lg:w-[calc(50%-1rem)] xl:w-[calc(33.333%-2rem)] max-h-[26.56rem] lg:h-[28.75rem] xl:h-[34.38rem] bg-neutralLight-neutral90 dark:bg-neutralDark-neutral90 rounded-[2rem] overflow-hidden"
           >
             <img
               src={tool.image}
               alt={tool.title}
-              className="rounded-t-[2rem] w-full h-[15rem] object-cover"
+              className="rounded-t-[2rem] w-full h-[11.25rem] object-cover"
             />
-            <div className="flex flex-col justify-start items-start text-left w-full gap-[0.5rem] md:gap-[1.5rem] px-[1.5rem] py-[2.75rem]">
-              <h5 className="h5_small text-left text-neutralLight-neutral10 dark:text-neutralDark-neutral10">
+            <div className="flex flex-col justify-start items-start text-left w-full px-[1.5rem] xl:px-[2.75rem] py-[1.5rem]">
+              <h5 className="h5_small xl:h5_500 text-left text-neutralLight-neutral10 dark:text-neutralDark-neutral10">
                 {tool.title}
               </h5>
-              <ul className="list-disc list-inside text-neutralLight-neutral10 dark:text-neutralDark-neutral10">
+              <ul className="list-disc list-inside text-neutralLight-neutral10 dark:text-neutralDark-neutral10 mt-[1rem]">
                 {tool.description.map((point, index) => (
                   <li key={index} className="p2">
                     {point}
                   </li>
                 ))}
               </ul>
-              <div className="flex items-start mt-auto">
+              <div className="flex items-start mt-[1.5rem]">
                 <CustomLink
                   variant="primary"
                   text="Learn more"

algrtm/src/styles/typography.css

@@ -75,6 +75,12 @@
     font-weight: 500;
     line-height: 2.17rem;
   }
+
+  .h5_smaller {
+    font-size: 1.5rem;
+    font-weight: 500;
+    line-height: 1.86rem;
+  }
   .h6 {
     font-size: 1.375rem;
     font-weight: 400;
@@ -103,6 +109,12 @@
     line-height: 1.8rem;
   }
 
+  .h6_small {
+    font-size: 1.25rem;
+    font-weight: 400;
+    line-height: 1.8rem;
+  }
+
   /* titles */
   .t6 {
     font-size: 1rem;