add css

css/index.cases.css

@@ -1,3 +1,31 @@
 #cases {
     padding: 18px;
-}
+}
+
+.cases-content{
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: 10px;
+    background-color: inherit;
+    padding: 10px;
+}
+
+.cases-item-big {
+    /*grid-column: 1 / 3;*/
+    grid-row: 1 / span 2;
+}
+
+.cases-item .cases-paragraph-hidden {
+    display: none;
+}
+
+.cases-item-big .cases-paragraph-hidden {
+    display: block;
+}
+
+/*@media (min-width: 774px) {
+    .cases-item-big {
+        grid-column: 1 / 1;
+        grid-row: 1 / span 2;
+    }
+}*/

css/index.nav.css

@@ -21,7 +21,7 @@
     display: flex;
     flex-direction: column;
     max-width: 100%;
-    margin: 30px auto;
+    margin: 50px auto;
 }
 
 .navigation_content a,

css/index.services.css

@@ -16,7 +16,7 @@
   }
 
   .services-carousel-item {
-    flex: 0 0 100%;
+    flex: 0 0 calc(100% - 10px);
     margin-right: 10px; 
     text-align: center;
     /*display: flex;
@@ -50,13 +50,4 @@
   .next-button:hover {
     background-color: #555; 
   }
-
-
-  .prev-button {
-    float: left;
-  }
-
-  .next-button {
-    float: right;
-  }
 

html/index.cases.partial.html

@@ -1,32 +1,28 @@
 <section id="cases" class="container">
     <h2>Best Cases</h2>
-    <div>
-        <div>
-            <img src="#" alt="">
-            <div>
+    <div class="cases-content">
+            <div class="cases-item cases-item-big">
                 <p>In favor of the plaintiff, $ 13,500 was recovered from the respondent 
                     surgeon for improperly performing cosmetic surgery for correcting the shape of the plaintiff’s nose. </p>
-                <p>The plaintiff claimed that she, as a patient, had entered into a contract with the surgeon, 
+                <p class="cases-paragraph-hidden">The plaintiff claimed that she, as a patient, had entered into a contract with the surgeon, 
                     and he agreed to perform plastic surgery of her nose in order to increase her aesthetic appeal. 
                     The appearance of the plaintiff didn't improve, actually, 
                     her face was disfigured. I helped the woman to receive her pain and suffering money.</p>
             </div>
-            <div>
+            <div class="cases-item">
                 <p>On 04.03.2017, the Family Court of the State of New York satisfied the claims of attorney William Rhoades. 
                     in the interests of the Client about deprivation of parental rights.</p>
-                <p>The court recognized that the father must be deprived of parental rights, 
+                <p class="cases-paragraph-hidden">The court recognized that the father must be deprived of parental rights, 
                     as he does not fulfill his obligations to the child in accordance with the norms of the Family Law. 
                     It was a difficult case, but I have proven that the presence of the father negatively affects the child, 
                     causes aggression in him immediately and destroys the psyche.</p>
             </div>
-            <div>
+            <div class="cases-item">
                 <p>In June 2019, the inheritance division case was considered at the Surrogate’s Court of the State of New York. 
                     The plaintiff insisted that his father died without leaving a will, and the plaintiff is the primary heir. </p>
-                <p>I helped the plaintiff to prove to the court that he is the successor, and can count on 80% of the 
+                <p class="cases-paragraph-hidden">I helped the plaintiff to prove to the court that he is the successor, and can count on 80% of the 
                     entire inheritance, which included significant amounts in accounts in banks of America, 
                     as well as 3 mansions in Hampton, a yacht fleet and 500 square meters of commercial real estate in NY.</p>
             </div>
-        </div>
-
     </div>
 </section>

js/cases.js

@@ -0,0 +1,12 @@
+const casesItem = document.querySelectorAll('.cases-item');
+let previousCaseItem = null;
+
+casesItem.forEach((caseItem) => {
+    caseItem.addEventListener('mouseover', (_) => {
+        if (previousCaseItem !== null) {
+            previousCaseItem.classList.remove('cases-item-big');
+        }
+        caseItem.classList.add('cases-item-big');
+        previousCaseItem = caseItem;
+    });
+});

js/index.js

@@ -1,4 +1,5 @@
 document.addEventListener('partialsLoaded', async () => {
     await import('./nav.js');
     await import('./services.js');
+    await import('./cases.js');
 });

js/services.js

@@ -34,39 +34,31 @@
     prevButton.addEventListener('click', moveToPrev);
     nextButton.addEventListener('click', moveToNext);
 });*/
-const carousel = document.querySelector('.services-carousel');
-  const prevButton = document.querySelector('.prev-button');
-  const nextButton = document.querySelector('.next-button');
-
-
-  const itemWidth = carousel.querySelector('.services-carousel-item').offsetWidth;
-
-
-  let currentPosition = 0;
+const servicesCarousel = document.querySelector('.services-carousel');
+    const prevButton = document.querySelector('.prev-button');
+    const nextButton = document.querySelector('.next-button');
+    const slideWidth = servicesCarousel.querySelector('.services-carousel-item').offsetWidth;
+    let currentPosition = 0;
 
-
-  function moveToNext() {
-    currentPosition += itemWidth;
-    if (currentPosition > 0) {
-      currentPosition = -(itemWidth * (carousel.children.length - 1));
+    function moveToNext() {
+        currentPosition += slideWidth;
+        if (currentPosition > 0) {
+            currentPosition = -(slideWidth * (servicesCarousel.children.length - 1));
+        }
+        updateCarouselPosition();
     }
-    updateCarouselPosition();
-  }
 
-
-  function moveToPrev() {
-    currentPosition -= itemWidth;
-    if (currentPosition < -(itemWidth * (carousel.children.length - 1))) {
-      currentPosition = 0;
+    function moveToPrev() {
+        currentPosition -= slideWidth;
+        if (currentPosition < -(slideWidth * (servicesCarousel.children.length - 1))) {
+            currentPosition = 0;
+        }
+        updateCarouselPosition();
     }
-    updateCarouselPosition();
-  }
 
-
-  function updateCarouselPosition() {
-    carousel.style.transform = `translateX(${currentPosition}px)`;
-  }
+    function updateCarouselPosition() {
+        servicesCarousel.style.transform = `translateX(${currentPosition}px)`;
+    }
 
-
-  prevButton.addEventListener('click', moveToPrev);
-  nextButton.addEventListener('click', moveToNext);
+    prevButton.addEventListener('click', moveToPrev);
+    nextButton.addEventListener('click', moveToNext);