The most significant changes include the addition of the minHeight …

…property to the `img` class in `Banner.tsx`, the change of the `flexBasis` property in the `space` class in `Banner.tsx`, and the addition of the `fontSize` and `lineHeight` properties to the `white` class in `Banner.tsx`. Additionally, the `truncate` property was added to the `Text` component in `Banner.tsx`, and the version number was updated in `index.tsx`. Lastly, the `flexWrap` and `flexBasis` properties were modified in the `info` and `lex` classes respectively in `index.tsx`.

1. The `minHeight` property was added to the `img` class in `Banner.tsx` with a value of `320px`. This change ensures that the minimum height of the image is maintained at `320px` regardless of the screen size or resolution.

2. The `flexBasis` property was changed to `0` in the `space` class in `Banner.tsx` when the screen width is less than or equal to `1024px`. This change allows the space to shrink to `0` when the screen width is `1024px` or less, providing more flexibility in the layout.

3. The `fontSize` and `lineHeight` properties were added to the `white` class in `Banner.tsx` with values of `tokens.fontSizeBase300` and `tokens.lineHeightBase300` respectively when the screen width is less than or equal to `600px`. This change ensures that the font size and line height are adjusted appropriately for smaller screens.

4. The `truncate` property was added to the `Text` component in `Banner.tsx`. This change allows the text to be truncated if it exceeds the available space.

5. The version number was updated from `0.1.1` to `0.2.0` in `index.tsx`. This change indicates a new version of the application with significant updates.

6. The `flexWrap` property was added to the `info` class in `index.tsx` with a value of `wrap` when the screen width is less than or equal to `600px`. This change allows the items within the `info` class to wrap onto the next line when the screen width is `600px` or less.

7. The `flexBasis` property was changed to `100%` in the `lex` class in `index.tsx` when the screen width is less than or equal to `600px`. This change allows the `lex` class to take up the full width of the container when the screen width is `600px` or less.

src/Pages/Gallery/Banner.tsx

@@ -6,7 +6,7 @@ import { ColFlex, Cover, Flex } from "~/Helpers/Styles";
 /**
  * @author Aloento
  * @since 1.3.5
- * @version 0.1.0
+ * @version 0.2.0
  */
 const useStyles = makeStyles({
   main: {
@@ -16,6 +16,7 @@ const useStyles = makeStyles({
     ...Cover,
     aspectRatio: "42/9",
     width: "100%",
+    minHeight: "320px",
     ...shorthands.borderRadius(tokens.borderRadiusXLarge),
   },
   mask: {
@@ -36,14 +37,21 @@ const useStyles = makeStyles({
   },
   space: {
     flexBasis: "50%",
-    flexShrink: 0
+    flexShrink: 0,
+    "@media screen and (max-width: 1024px)": {
+      flexBasis: 0,
+    }
   },
   txt: {
     ...ColFlex,
     justifyContent: "space-around"
   },
   white: {
-    color: "white !important"
+    color: "white !important",
+    "@media screen and (max-width: 600px)": {
+      fontSize: tokens.fontSizeBase300,
+      lineHeight: tokens.lineHeightBase300,
+    }
   }
 });
 
@@ -99,7 +107,7 @@ export function Banner() {
             </LargeTitle>
           </div>
 
-          <Text size={500} className={style.white}>
+          <Text size={500} truncate className={style.white}>
             Lorem Ipsum is simply dummy text of the printing and typesetting industry.
             Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
             when an unknown printer took a galley of type and scrambled it to make a type specimen book.

src/Pages/Product/index.tsx

@@ -16,12 +16,15 @@ import { ProductRadioList } from "./RadioList";
 /**
  * @author Aloento
  * @since 0.1.0
- * @version 0.1.1
+ * @version 0.2.0
  */
 const useStyles = makeStyles({
   info: {
     ...Flex,
-    columnGap: tokens.spacingHorizontalXXXL
+    columnGap: tokens.spacingHorizontalXXXL,
+    "@media screen and (max-width: 600px)": {
+      flexWrap: "wrap",
+    }
   },
   detail: {
     ...BaseCard,
@@ -37,6 +40,9 @@ const useStyles = makeStyles({
     flexBasis: "50%",
     flexShrink: 0,
     rowGap: tokens.spacingVerticalXL,
+    "@media screen and (max-width: 600px)": {
+      flexBasis: "100%",
+    }
   },
   fore: {
     color: tokens.colorBrandForeground1