-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
+
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+
diff --git a/styles/style.css b/styles/style.css
index 56d9dd3..7798f22 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -75,10 +75,10 @@
}
.first-card-p {
- width: 299px;
padding: 27px;
padding-top: 27px;
text-align: center;
+ padding: 27px 25px;
}
.first-card-image {
@@ -90,11 +90,18 @@
.first-card-cards {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+ max-width: 350px;
}
.image-row-background {
- background-color: #E0E0E0;;
- height: 530px;
+ background-color: #E0E0E0;
+ max-height: 530px;
+ padding: 62px 72px 0px 72px;
+}
+
+.image-row-wrapper {
+ position: relative;
+ bottom: -25px;
}
.image-row-desktop {
@@ -106,22 +113,34 @@
}
.row-image-desktop {
- margin-top:62px;
+ width: 100%;
}
.image-row-mobile1 {
+ margin: auto;
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
- padding-top: 32px;
}
.image-row-mobile2 {
+ margin: auto;
+ max-width: 368px;
display: flex;
justify-content: center;
align-items: center;
- padding: 24px 23px;
+ padding-top: 24px;
+}
+
+.row-image-mobile {
+ width: 100%;
+ max-width: 177px;
+}
+
+.row-image-mobile2 {
+ width: 100%;
+ max-width: 368px;
}
.second-card {
@@ -130,28 +149,25 @@
flex-direction: row;
justify-content: center;
align-items: center;
- gap: 21px;
- padding-top: 191px;
- padding-bottom: 79px;
+ gap: 16px;
+ padding: 191px 72px 79px 72px;
}
.second-card-p {
- width: 299px;
- padding: 27px;
- padding-top: 27px;
+ padding: 15px 32px 65px 32px;
text-align: center;
}
.second-card-image {
display: block;
margin: auto;
- width: 103px;
- height: 103px;
+ height: 104px;
padding: 35px 12px 0px 12px;
}
.second-card-cards {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+ width: auto;
}
@media screen and (max-width: 1024px) {
@@ -187,18 +203,25 @@
display: flex;
flex-direction: column;
gap: 16px;
- padding-top: 112px;
+ padding: 150px 23px 0px 23px;
}
-}
-@media screen and (max-width: 1270px) {
.second-card {
flex-direction: column;
}
+
+ .second-card-p {
+ font-size: 14px;
+ max-width: 302px;
+ }
+
}
-@media screen and (max-width: 1919px) {
+@media screen and (max-width: 1270px) {
+}
+
+@media screen and (max-width: 1024px) {
.image-row-background {
height: 579px;
}
@@ -208,7 +231,7 @@
}
}
-@media screen and (min-width: 1920px){
+@media screen and (min-width: 1025px){
.image-row-mobile1 {
display: none;
}
@@ -216,4 +239,14 @@
.image-row-mobile2 {
display: none;
}
+}
+
+@media screen and (max-width: 369px) {
+ .image-row-mobile1 {
+ width: 50%;
+ }
+
+ .image-row-mobile2 {
+ width: 100px;
+ }
}
\ No newline at end of file