whitepappers mobile view

Author: Anton-Mushnin

frontend/pages/whitepapers.js

@@ -6,8 +6,8 @@ import { AWS_ASSETS_PATH } from "../src/core/constants";
 
 const Papers = () => {
   return (
-    <Flex direction="column" px="7%" width="100%" alignItems="center">
-      <Heading pb="60px" pt="142px">
+    <Flex direction="column" px="7%" width="100%" alignItems="center" pb="40px">
+      <Heading pb={["40px", "40px", "60px"]} pt={["122px", "122px", "142px"]}>
         Whitepapers
       </Heading>
       <WhitepaperCard

frontend/src/components/molecules/WhitepaperCard.js

@@ -3,20 +3,28 @@ import { Flex, Image, Text } from "@chakra-ui/react";
 
 const WhitepaperCard = ({ img, title, date = "", text, href, ...props }) => {
   return (
-    <Flex p="20px" bg="#353535" borderRadius="20px" {...props}>
+    <Flex
+      direction={["column", "column", "row"]}
+      alignItems={["center", "center", "start"]}
+      p="20px"
+      bg="#353535"
+      borderRadius="20px"
+      {...props}
+    >
       <Image
         src={img}
-        w="200px"
-        h="200px"
-        borderRadius="20px"
+        w={["150px", "150px", "200px"]}
+        h={["150px", "150px", "200px"]}
+        borderRadius={["10px", "10px", "20px"]}
         cursor="pointer"
+        pb={["10px", "10px", "0px"]}
         onClick={() => {
           window.open(href);
         }}
       />
       <Flex direction="column" ml="20px">
         <Text
-          fontSize={["24px"]}
+          fontSize={["18px", "18px", "24px"]}
           fontWeight="700"
           maxW="500px"
           lineHeight="120%"
@@ -25,19 +33,19 @@ const WhitepaperCard = ({ img, title, date = "", text, href, ...props }) => {
           {title}
         </Text>
         {date && (
-          <Text fontSize={["16px"]} lineHeight="20px">
+          <Text fontSize={["12px", "12px", "16px"]} lineHeight="20px">
             {date}
           </Text>
         )}
-        <Text fontSize={["18px"]} my="5px" lineHeight="23px">
+        <Text fontSize={["14px", "14px", "18px"]} my="5px" lineHeight="23px">
           {text}
         </Text>
         <Text
           href={href}
           maxW="fit-content"
           color="orange.1000"
           cursor="pointer"
-          fontSize="18px"
+          fontSize={["14px", "14px", "18px"]}
           fontWeight="700"
           _hover={{ color: "#F4532F" }}
           onClick={() => {