Made leads and member distinction

src/assets/scss/core/layout/_header.scss

@@ -85,7 +85,7 @@
 	display: none;
 }
 
-@include media( '<=medium' ) {
+@include media( '<=large' ) {
 
 	.header-nav-toggle {
 		display: block;

src/assets/scss/events/events.scss

@@ -1,12 +1,26 @@
 .event-parent-container{
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */
+    grid-auto-rows: auto; /* Automatically adds rows as needed */
     max-width: 1200px;
     width: 100%;
-    // gap:1rem;
-    align-items: center;
-    flex-wrap: wrap;
-    gap:1.4rem;
-    justify-content: space-between;
+    gap: 1.4rem; /* Adjust the gap as needed */
+    justify-content: center;
+    place-items: center;
+}
+
+@include media( '<=large' ) {
+
+    .event-parent-container{
+        grid-template-columns: repeat(2,1fr);
+    }
+}
+
+@include media( '<=medium' ) {
+
+    .event-parent-container{
+        grid-template-columns: repeat(1,1fr);
+    }
 }
 
 .event-container{

src/assets/scss/members/members.scss

@@ -1,25 +1,49 @@
-.members-parent-container {
-    display: flex;
+// Define the media mixin
+@mixin media($breakpoint) {
+    @media screen and (max-width: #{$breakpoint}) {
+      @content;
+    }
+  }
+
+  // Use the media mixin
+  .members-parent-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: auto;
     max-width: 1200px;
     width: 100%;
-    gap:1rem;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
+    gap: 1.4rem;
+    justify-content: center;
+    place-items: center;
+
+    @include media(1200px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    @include media(700px) {
+      grid-template-columns: repeat(1, 1fr);
+    }
+  }
+
+
+
+// @include media( '<=medium' ) {
 
-}
+//     .members-parent-container{
+//         grid-template-columns: repeat(1,1fr);
+//     }
+// }
 
 .members-container {
     // padding: 0 1.5rem;
     align-items: center;
     background-color: rgba(255, 255, 255, 0.079);
     border-radius: 7px;
     // min-height: 350px;
-    width: 337px;
+    width: 330px;
     display: flex;
     align-items: flex-end;
     justify-content: center;
-    height: 400px;
+    height: 330px;
     overflow: hidden;
     // margin-bottom: 5%;
     position: relative;

src/components/Members/Members.js

@@ -3,7 +3,20 @@ import SectionHeader from '../sections/partials/SectionHeader'
 import Hero2 from "../sections/Hero2";
 import data from "../../core.json";
 import "../../assets/scss/members/members.scss";
-import {Link} from "react-router-dom"
+import { Link } from "react-router-dom"
+
+export const Card = ({img, name, role}) => {
+    return (
+        <Link to="https://pointblank.vercel.app/kitarp29" className="members-container">
+            <img src={img} alt="logo" className='members-img' />
+            <div className='members-img-overlay'></div>
+            <div className='members-info-container'>
+                <h2>{name}</h2>
+                <h3>{role}</h3>
+            </div>
+        </Link>
+    )
+}
 
 const Members = () => {
 
@@ -17,17 +30,16 @@ const Members = () => {
 
             <div className="container">
                 <SectionHeader style={{ marginTop: "-30px" }} data={sectionHeader} className="center-content" />
+                <h3 style = {{marginLeft:"10px"}}>Leads</h3>
+                <div className='members-parent-container'>
+                    {data.filter((x)=>x.role==="Lead").map((item, key) => (
+                        <Card img={item.img} key={key} name={item.name} role={item.role} />
+                    ))}
+                </div>
+                <h3 style = {{marginLeft:"10px"}}>Members</h3>
                 <div className='members-parent-container'>
-                    {data.map((item,key)=>(
-                        <Link to="https://pointblank.vercel.app/kitarp29" className="members-container" key={key}>
-                            <img src={item.img} alt="logo" className='members-img'/>
-                            <div className='members-img-overlay'></div>
-                        <div className='members-info-container'>
-
-                            <h2>{item.name}</h2>
-                            <h3>{item.role}</h3>
-                        </div>
-                    </Link>
+                    {data.filter((x)=>x.role==="Member").map((item, key) => (
+                        <Card img={item.img} key={key} name={item.name} role={item.role} />
                     ))}
                 </div>
             </div>

src/components/layout/Header.js

@@ -125,7 +125,6 @@ const Header = ({
                       <li>
                         <a
                           href={'/events'}
-
                           className='navlink'
                           onClick={closeMenu}
                         >