Remove most of the media queries in the various css file

Remove unnecessary css variables and update style.

src/components/about/FourValues.tsx

@@ -2,30 +2,37 @@ import styles from "./styles.module.css";
 import { ValueCard } from "@site/src/components/about/ValueCard";
 import { valuesDetails } from "./Values/valuesDetails";
 
-
 export default function FourValues() {
   return (
     <div className={styles.four_values_container}>
       <div className="row">
         <div className="col">
-          <h1 className={"padding-none" + " "+ "full-flex-centered"}>Our values </h1>
+          <h1 className={"padding-none" + " " + "full-flex-centered"}>
+            Our values{" "}
+          </h1>
         </div>
       </div>
       <ul
-        className={"row" + " " + "padding-none" + " " + styles.row_with_margins+" "+ "flex-full-centered"}
+        className={
+          "row" +
+          " " +
+          "padding-none" +
+          " " +
+          styles.row_with_margins +
+          " " +
+          "flex-full-centered"
+        }
       >
         {valuesDetails.map((value, index) => (
           <li className="cards-list" key={index}>
             <div className="col">
               <div className={styles.value_card_container}>
-                <ValueCard
-                  value={value}
-                />
+                <ValueCard value={value} />
               </div>
             </div>
           </li>
         ))}
       </ul>
     </div>
   );
-}
+}

src/components/about/SmallPortraitCard.tsx

@@ -5,7 +5,7 @@ import { useRef, useState } from "react";
 import LargePortraitCard from "./LargePortraitCard";
 
 const contentStyle = {
-  background: "var(--ifm-background-color-large-portrait-card)",
+  background: "white",
   borderRadius: "10px",
 };
 

src/components/about/SubTeam.tsx

@@ -10,7 +10,7 @@ export default function SubTeam ({
 }) {
   return (
     <div className={styles.subteam_component}>
-      <h2 className="text-centered"> {description}</h2>
+      <h2 className="text--center"> {description}</h2>
       <div className={"container" + " " + styles.subteam_container}>
         <ul
           className={

src/components/about/ValueCard.tsx

@@ -2,18 +2,19 @@ import styles from "./styles.module.css";
 
 export function ValueCard({ value }) {
   return (
-    <div className={"card " + styles.value_card}>
+    <div className={"card" + " " + styles.value_card}>
       <div
-        className={"flex-full-centered"}
+        className={"card__header flex-full-centered"}
         style={{ marginBottom: "var(--ifm-spacing-lg)" }}
       >
         <value.pictureComponent alt={value.alt} />
       </div>
-      <div className={styles.value_header}>{value.name}</div>
-      <div className={styles.value_text}>
-        <value.DescriptionMD className={styles.value_component} />
+
+      <div className={"card__body"}>
+        <div className={styles.value_header}>{value.name}</div>
+        <value.DescriptionMD className={styles.value_value_text} />
       </div>
     </div>
   );
 }
- export default ValueCard;
+export default ValueCard;

src/components/about/index.tsx

@@ -28,7 +28,7 @@ export function About() {
 
           <div className="row">
             <div className="col col--10 col--offset-1">
-              <h1 className="text-centered">Meet the QuantStack team</h1>
+              <h1 className="text--center">Meet the QuantStack team</h1>
               <div className={styles.team_description}>
                 A team of outliers, leaders in software projects adopted at the
                 global scale, benefiting millions of people worldwide.
@@ -62,7 +62,7 @@ export function About() {
       <div className={styles.join_the_team_container}>
         <h1
           className={
-            "text-centered" +
+            "text--center" +
             " " +
             "padding-none" +
             " " +