ok

src/components/AcademySection.js

@@ -41,14 +41,18 @@ const AcademySection = ({hoveredCard, setHoveredCard, setSelectedProduct, setSho
                 onMouseEnter={() => setHoveredCard(product.id)}
                 onMouseLeave={() => setHoveredCard(null)}
               >
+                <div>
                 <div className={styles.courseImage} style={{ backgroundImage: `url(${product.image})` }}>
                   {product.price === 0 && (
                     <span className={styles.courseLabel}>Free</span>
                   )}
                 </div>
-                <div className={styles.courseContent}>
+                <div className={styles.courseContentTop}>
                   <h3 className={styles.courseTitle}>{product.name}</h3>
                   <p className={styles.courseDesc}>{product.description}</p>
+                  </div>
+                                  <div className={styles.courseContentBottom}>
+
                   <div className={styles.coursePrice}>
                     <span
                       className={
@@ -64,6 +68,7 @@ const AcademySection = ({hoveredCard, setHoveredCard, setSelectedProduct, setSho
                   </div>
                 </div>
               </div>
+              </div>
             ))}
         </div>
       </Container>