Modify the layout of logos with respect to the experience title

src/components/info/InfoSection.jsx

@@ -2,7 +2,6 @@ import React from "react";
 import styles from "./InfoSection.module.css";
 
 function InfoSection({ title, data, isEducation }) {
-	// Sort the data array based on ID in descending order (newest first)
 	const sortedData = [...data].sort((a, b) => b.id - a.id);
 
 	return (
@@ -10,14 +9,18 @@ function InfoSection({ title, data, isEducation }) {
 			<h2 className={styles.sectionTitle}>{title}</h2>
 			{sortedData.map((item) => (
 				<div key={item.id} className={styles.entry}>
-					<div className={styles.logoContainer}>
+					<div className={styles.headerSection}>
-						<img src={item.logo} alt={`${item.organization} logo`} className={styles.logo} />
+						<div className={styles.logoContainer}>
+							<img src={item.logo} alt={`${item.organization} logo`} className={styles.logo} />
+						</div>
+						<div className={styles.titleSection}>
+							<h3 className={styles.title}>{item.title}</h3>
+							<p className={styles.organizationInfo}>
+								{item.organization} | {item.location} | {item.duration}
+							</p>
+						</div>
 					</div>
 					<div className={styles.content}>
-						<h3 className={styles.title}>{item.title}</h3>
-						<p className={styles.organizationInfo}>
-							{item.organization} | {item.location} | {item.duration}
-						</p>
 						<p className={styles.description}>{item.description}</p>
 						<div className={styles.additionalInfo}>
 							{isEducation && item.achievements && item.achievements.length > 0 && (

src/components/info/InfoSection.module.css

@@ -13,25 +13,32 @@
 }
 
 .entry {
-	display: flex;
 	position: relative;
 	margin-bottom: 40px;
 	padding-left: 20px;
 	border-left: 2px solid var(--accent-color);
 }
 
+.headerSection {
+	display: flex;
+	align-items: center;
+	margin-bottom: 15px;
+}
+
 .logoContainer {
-	flex: 0 0 80px;
+	flex: 0 0 auto;
 	margin-right: 20px;
+	height: 60px; /* Adjust this value to match your desired logo height */
+	width: 60px; /* Adjust this value to maintain aspect ratio */
 }
 
 .logo {
 	width: 100%;
-	height: auto;
+	height: 100%;
 	object-fit: contain;
 }
 
-.content {
+.titleSection {
 	flex: 1;
 }
 
@@ -44,10 +51,13 @@
 
 .organizationInfo {
 	font-size: 1.1rem;
-	margin-bottom: 10px;
 	color: #333;
 }
 
+.content {
+	margin-left: 80px; /* This should match the logoContainer width + its right margin */
+}
+
 .description {
 	font-size: 1rem;
 	line-height: 1.6;
@@ -62,8 +72,8 @@
 }
 
 .skillSection {
-	flex: 1 1 30%; /* This allows for 3 columns with some flexibility */
+	flex: 1 1 30%;
-	min-width: 200px; /* Ensures readability on smaller screens */
+	min-width: 200px;
 	margin-bottom: 15px;
 }
 
@@ -94,16 +104,17 @@
 		padding: 30px 5%;
 	}
 
-	.entry {
+	.headerSection {
-		flex-direction: column;
+		flex-direction: row;
+		align-items: flex-start;
 	}
 
 	.logoContainer {
-		margin-bottom: 15px;
+		margin-right: 15px;
 	}
 
 	.content {
-		padding-left: 0;
+		margin-left: 0;
 	}
 
 	.additionalInfo {