commit

src/components/swiper/swiper.css

@@ -1,3 +1,13 @@
+
+@media screen and (min-width: 1600px) {
+  .image__slider {
+    height: 514px;
+  }  
+  .image__slider_active {
+    height: 514px;
+  }
+}
+
 .image__slider {
   width: 100%;
   height: 428px;
@@ -6,6 +16,13 @@
   border-radius: 16px;
 }
 
+.swiper-slide {
+  width: 536px;
+}
+
+
+
+
 .image__slider_active {
   width: 100%;
   height: 428px;
@@ -19,7 +36,8 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  gap: 340px;
+  gap: 304px
+
 }
 
 .slider__info {
@@ -29,8 +47,8 @@
 }
 
 .swiper__caption {
+  white-space: nowrap;
   margin: 0;
-  font-family: "Gilroy";
   font-style: normal;
   font-weight: 500;
   font-size: 14px;
@@ -58,7 +76,6 @@
 }
 
 .container1 {
-  font-family: "Gilroy";
   font-style: normal;
   font-weight: 500;
   font-size: 14px;
@@ -79,10 +96,84 @@
 .swiper__caption {
   margin: 0;
   color: #888888;
+  text-align: center;
 }
 
 .pagination__container {
-  display: flex;
-  flex-direction: row-reverse;
+  display: grid;
+  grid-template-columns: 120px auto;
   gap: 16px;
 }
+
+
+.swiper-slide {
+  width: 536px
+}
+
+@media screen and (min-width: 1600px) {
+  .image__slider {
+    height: 514px;
+  }  
+  .image__slider_active {
+    height: 514px;
+  }
+  .container {
+    gap: 22px;
+  }
+
+  .swiper__caption {
+    font-size: 17px;
+  }
+
+  .container1 {
+    font-size: 17px;
+  }
+  .pagination__container {
+    grid-template-columns: 145px auto;
+
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .slider__info {
+    display: block;
+
+  }
+  .button__container {
+    margin-left: 29px;
+    margin-right: 29px;
+
+  }
+
+  .button__container {
+    gap: 0;
+  }
+
+
+}
+
+@media screen and (max-width: 639px) {
+  .swiper-slide {
+    width: 290px
+  }
+  
+  .image__slider {
+    height: 232px;
+  }
+  
+  .image__slider_active {
+    height: 232px;
+  }
+
+  .button__container {
+    gap: 0;
+  }
+
+  .button__container {
+    margin-left: 19px;
+    margin-right: 19px;
+
+  }
+
+
+}