Added css classes

Signed-off-by: krishnaShuk <shuklakrishna.kris@gmail.com>

Author: KrishnaShuk

content-learn/mastering-meshery/introduction-to-meshery/meshery/interpreting-meshery-designs.mdx

@@ -55,7 +55,7 @@ These components encapsulate the resources and include their detailed configurat
 <h2 class="chapter-sub-heading">Meshery Design at a Glance</h2>
 
 <a href={basicDesign}>
-  <img src={basicDesign} width="100%" align="center" />
+  <img class="image-design" src={basicDesign} width="100%" align="center" />
 </a>
 
 
@@ -93,12 +93,10 @@ Let's explore a few of these categories.
 1. **Triangles**:
 
     <img
+      class="image-design"
       src={Triangles}
       align="center"
       width="25%"
-      style={{
-         objectFit: 'contain !important',
-      }}
     />
 
     - **Category**: **Networking and Service Management**.
@@ -111,12 +109,10 @@ Let's explore a few of these categories.
 2. **Rectangles**:
 
     <img
+      class="image-design"
       src={Rectangles}
       align="center"
       width="25%"
-      style={{
-         objectFit: 'contain !important',
-      }}
     />
 
     - **Category**: **Hierarchical and Parent Components**
@@ -130,12 +126,10 @@ Let's explore a few of these categories.
 3. **User Icons**:
 
     <img
+      class="image-design"
       src={Users}
       align="center"
       width="25%"
-      style={{
-         objectFit: 'contain !important',
-      }}
     />
 
     - **Category**: **Role-based access control (RBAC) components**
@@ -147,12 +141,10 @@ Let's explore a few of these categories.
 4. **Cylinders**:
 
     <img
+      class="image-design"
       src={Cylinders}
       align="center"
       width="25%"
-      style={{
-         objectFit: 'contain !important',
-      }}
     />
 
     - **Category**: **Storage and Stateful Components**
@@ -175,25 +167,21 @@ Note that users have the flexibility to **customize** these arrow styles to suit
 **Edge Relationships**
 
 <img
+  class="image-design"
   src={DashedArrows}
   align="center"
   width="25%"
-  style={{
-         objectFit: 'contain !important',
-  }}
 />
 
 These are used to indicate traffic flow and relationships between components. The dashed lines represent dynamic interactions and data movement, while the arrowheads show the direction of the flow or relationship.
 
 **Annotations**
 
 <img
+  class="image-design"
   src={AnnotationArrow}
   align="center"
   width="25%"
-  style={{
-         objectFit: 'contain !important',
-  }}
 />
 
 These are used to denote annotations or static connections between components. They serve to illustrate fixed relationships or highlight specific details without implying a flow of data or interaction.
@@ -203,12 +191,10 @@ These are used to denote annotations or static connections between components. T
 1. **Edge-Network Relationship**: Represented by a dashed arrow with **port/network protocol**.
 
 <img
+  class="image-design"
   src={NetworkEdgeRelationship}
   align="center"
   width="50%"
-  style={{
-         objectFit: 'contain !important',
-  }}
 />
 
 - **Dashed arrow**: Indicates that the service is linked to the pod, exposing network access to it through a specified port.
@@ -217,7 +203,7 @@ These are used to denote annotations or static connections between components. T
 **Creating Edge-Network Relationships Between Kubernetes Components**
 
 <a href={EdgeNetworkGif}>
-  <img src={EdgeNetworkGif} width="100%" align="center" />
+  <img class="image-design" src={EdgeNetworkGif} width="100%" align="center" />
 </a>
 
 
@@ -226,21 +212,16 @@ These are used to denote annotations or static connections between components. T
 The intermediary component (such as a RoleBinding) connects the two, defining how permissions are assigned. For example, a dashed arrow from a `Role` to a `ServiceAccount` with a `RoleBinding` in the middle shows the connection established by the RoleBinding, which links the specific role to the service account and grants the appropriate permissions.
 
 <img
+  class="image-design"
   src={EdgePermissions}
   align="center"
   width="50%"
-  style={{
-         objectFit: 'contain !important',
-  }}
 />
 
 **Creating Edge-Permission Relationships Between Components**
 
 <a href={edgePermissionGif}>
-  <img src={edgePermissionGif} width="100%" align="center" 
-  style={{
-         objectFit: 'contain !important',
-  }}
+  <img class="image-design" src={edgePermissionGif} width="100%" align="center" 
   />
 </a>
 
@@ -255,14 +236,10 @@ Meshery extends and offers support for numerous [integrations](https://docs.mesh
 In Meshery, these integrated components are distinctly represented by their specific logos as icons and various shapes. These components can be found in `Components` in the dock.
 
 <img
+  class="image-design"
   src={Integrations}
   align="center"
   width="50%"
-  style={{ 
-    marginTop: '20px', 
-    marginBottom: '20px', 
-    objectFit: 'contain !important',
-  }} 
 />
 <h5 class="chapter-sub-heading">_Example of integration components in Meshery_</h5>
 
@@ -300,10 +277,7 @@ Annotations can be created using Meshery's Diagramming tools found in the dock a
 1. **Images**:  Images can be added to the design to represent components, logos, or any visual aid that supports understanding the architecture.
 
 <a href={AnnotationExampleGif}>
-  <img src={AnnotationExampleGif} width="100%" align="center" 
-  style={{
-         objectFit: 'contain !important',
-  }}
+  <img class="image-design" src={AnnotationExampleGif} width="100%" align="center" 
   />
 </a>
 
@@ -325,21 +299,15 @@ While default shapes, colors, and icons are provided for components and annotati
 **Customizing Kubernetes Components**
 
 <a href={CustomizeKubernetesGif}>
-  <img src={CustomizeKubernetesGif} width="100%" align="center" 
-  style={{
-         objectFit: 'contain !important',
-  }}
+  <img class="image-design" src={CustomizeKubernetesGif} width="100%" align="center" 
   />
 </a>
 
 
 **Creating and Customizing Arrow Annotations**
 
 <a href={CreateAnnotationGif}>
-  <img src={CreateAnnotationGif} width="100%" align="center" 
-  style={{
-         objectFit: 'contain !important',
-  }}
+  <img class="image-design" src={CreateAnnotationGif} width="100%" align="center" 
   />
 </a>
 

src/components/Learn-Components/Chapters-Style/chapters.style.js

@@ -22,4 +22,8 @@ export const ChapterStyle = styled.div`
     aspect-ratio: unset !important;
     margin: 20px;
   }
+
+  .image-design {
+    object-fit: contain !important; 
+  }
 `;