cards update

add div change card change ul

src/css/our-yachts.css

@@ -1,20 +1,64 @@
-/* @media screen and (min-width: 768px) {
+.container {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+@media screen and (min-width: 320px) and (max-width: 767px) {
+    .container {
+        max-width: 375px;
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+
+    .section {
+        padding-bottom: 80px;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .section {
+        padding-bottom: 150px;
+    }
+}
+
+@media screen and (min-width: 768px) and (max-width: 1279px) {
     .container {
-        margin-right: auto;
-        margin-left: auto;
         max-width: 768px;
+        padding-left: 32px;
+        padding-right: 32px;
     }
-} */
+}
 
-@media screen and (max-width: 767px) {
-.benetti-oasis-card,
-.belle-anna-card {
-    display: none;
+@media screen and (min-width: 1280px) {
+    .container {
+        padding-left: 50px;
+        padding-right: 50px;
+    }
 }
 
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+    .container {
+        max-width: 1280px;
+    }
 }
+
+@media screen and (min-width: 1440px) {
+    .container {
+        max-width: 1440px;
+    }
+}
+
+@media screen and (max-width: 767px) {
+
+    .benetti-oasis-card,
+    .belle-anna-card {
+        display: none;
+    }
+
+}
+
 .our-yachts-section-title {
-        /*TYPOGRAPHY*/
+    /*TYPOGRAPHY*/
     color: #FBFBFB;
     text-align: center;
     font-family: Inter;
@@ -41,24 +85,47 @@
     .our-yachts-section-title {
         max-width: 714px;
     }
+
+    .yacht-title {
+        width: 313px;
+    }
+
+    .yacht-params {
+        width: 313px;
+    }
+}
+
+@media screen and (min-width: 1440px) {
+
+    .yacht-title {
+        width: 328px;
+    }
+
+    .yacht-params {
+        width: 328px;
+    }
 }
+
 .our-yahts-list {
     display: flex;
     justify-content: center;
     align-items: center;
 }
+
 @media screen and (min-width: 768px) {
     .our-yahts-list {
         display: flex;
         /* justify-content: space-between; */
         align-items: center;
         gap: 32px;
-}
+    }
+
 }
 
 .our-yahts-card {
     display: flex;
     flex-direction: column;
+    align-items: center;
     row-gap: 32px;
     padding: 16px 16px 32px 16px;
     background-color: #FBFBFB;
@@ -67,15 +134,18 @@
     margin-left: auto;
     margin-right: auto;
 }
+
 @media screen and (min-width: 768px) {
     .our-yahts-card {
         width: calc((100% - 32px)/2);
     }
 }
+
 @media screen and (min-width: 1280px) {
     .our-yahts-list {
         gap: 25px;
     }
+
     .our-yahts-card {
         width: calc((100% - 50px)/3)
     }
@@ -87,52 +157,64 @@
     row-gap: 16px;
 } */
 .yacht-name {
-        color: #1B414B;
-        font-family: Inter;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 1.18;
-        /* 16.52px */
-        letter-spacing: -0.05em;
-        text-transform: uppercase;
-        justify-content: flex-start;
-        gap: 16px 125px;
-        display: flex;
-        position: relative;
-        /* padding-left: 16px;
-        padding-right: 16px;        */
-        margin: 0 auto;
-    }
+    color: #1B414B;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.18;
+    letter-spacing: -0.05em;
+    text-transform: uppercase;
+
+}
+
+.yacht-title {
+    width: 270px;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+}
+
 @media screen and (min-width: 768px) {
     .yacht-name {
         gap: 16px 112px;
-        font-size: 16px;        
+        font-size: 16px;
+    }
+
+    .yacht-title {
+        width: 272px;
+    }
+
+    .yacht-params {
+        width: 272px;
     }
+
     .benetti-card {
         justify-content: flex-start;
         gap: 16px 22px;
         display: flex;
-            
+
     }
+
     .benetti-card-overflow {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         width: 147px;
-        
+
 
     }
 }
-.yacht-name:after {
+
+.yacht-title:after {
     color: rgba(4, 3, 6, 0.10);
     background-color: rgba(4, 3, 6, 0.10);
     content: "";
     width: 100%;
     position: absolute;
-    bottom:-16px;
+    bottom: -16px;
     height: 1px;
-    
+
 }
 
 .yacht-class {
@@ -143,38 +225,45 @@
     opacity: 0.4;
     text-align: end;
 }
+
 @media screen and (min-width: 768px) {
     .yacht-class {
         font-size: 13px;
     }
-  
+
 }
+
 .yacht-params {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    gap: 6px 114px;
-    margin: 0 auto;
+    justify-content: space-between;
+    /* gap: 16px 114px; */
+    width: 270px;
+    flex-shrink: 1;
+    flex-grow: 0;
     /* white-space: nowrap; */
-
-
-
+
+
+
+
 }
+
 @media screen and (min-width: 768px) {
     .yacht-params {
         gap: 6px 116px;
     }
+
     .benetti-params {
         gap: 6px 104px;
     }
 }
 
 .yacht-params-names {
-    
-    
+
+
     text-transform: uppercase;
     opacity: 0.4;
 }
+
 /* @media screen and (min-width: 768px) {
     .yacht-params-names {
         color: #040306;
@@ -200,9 +289,7 @@
             letter-spacing: 0.03em;
     }
 } */
-.yacht-params-values {
-
-}
+.yacht-params-values {}
 
 .yaht-rental-link-button {
     margin-top: 40px;
@@ -223,7 +310,7 @@
     /* 128.571% */
     letter-spacing: -0.28px;
     background-color: inherit;
-    
+
 }
 
 @media screen and (max-width: 767px) {
@@ -233,7 +320,7 @@
         display: none;
     }
 
-} 
+}
 
 @media screen and (max-width: 1199px) {
     .belle-anna-card {