diff --git a/blocks/additional-info/__link/additional-info__link.css b/blocks/additional-info/__link/additional-info__link.css
index 715aa01..10f3b29 100644
--- a/blocks/additional-info/__link/additional-info__link.css
+++ b/blocks/additional-info/__link/additional-info__link.css
@@ -1,6 +1,14 @@
.additional-info__link {
font-size: 19px;
line-height: 19px;
+ font-weight: 500;
+}
+
+@media only screen and (max-width: 320px) {
+ .additional-info__link {
+ font-size: 14px;
+ line-height: 22px;
+ }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
diff --git a/blocks/additional-info/__list-item/additional-info__list-item.css b/blocks/additional-info/__list-item/additional-info__list-item.css
index 68f6809..e93fad4 100644
--- a/blocks/additional-info/__list-item/additional-info__list-item.css
+++ b/blocks/additional-info/__list-item/additional-info__list-item.css
@@ -1,11 +1,24 @@
.additional-info__list-item {
- margin-bottom: 20px;
+ margin-bottom: 16px;
display: flex;
justify-content: space-between;
+ align-items: center;
+
+}
+
+.additional-info__list-item:last-of-type {
+ margin-bottom: 0;
}
-@media only screen and (min-width: 769px) {
+@media only screen and (min-width: 425px) and (max-width: 768px) {
.additional-info__list-item {
- margin-bottom: 16px;
+ margin-bottom: 20px;
+ }
+}
+
+@media only screen and (max-width: 424px) {
+ .additional-info__list-item {
+ margin-bottom: 18px;
+ align-items: flex-end;
}
}
diff --git a/blocks/additional-info/__list/additional-info__list.css b/blocks/additional-info/__list/additional-info__list.css
index 5b309de..83bcb46 100644
--- a/blocks/additional-info/__list/additional-info__list.css
+++ b/blocks/additional-info/__list/additional-info__list.css
@@ -1,17 +1,20 @@
.additional-info__list {
- margin: 49px 0 0 0;
+ margin: 0;
list-style-type: none;
padding: 0;
}
-@media only screen and (min-width: 769px) and (max-width: 1024px) {
+@media only screen and (max-width: 320px) {
.additional-info__list {
- margin: 40px 0 0 0;
+ margin: 0;
+ padding-top:10px;
}
}
-@media only screen and (min-width: 1025px) {
+@media only screen and (min-width: 769px) and (max-width: 1024px) {
.additional-info__list {
- margin: 45px 0 0 0;
+ margin: 0;
+ padding-top: 4px;
}
}
+
diff --git a/blocks/additional-info/__subtitle/additional-info__subtitle.css b/blocks/additional-info/__subtitle/additional-info__subtitle.css
deleted file mode 100644
index 34fe740..0000000
--- a/blocks/additional-info/__subtitle/additional-info__subtitle.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.additional-info__subtitle {
- line-height: 15px;
- font-size: 15px;
- margin: 12px 0 0 0;
-}
-
-@media only screen and (min-width: 769px) and (max-width: 1024px) {
- .additional-info__subtitle {
- font-size: 16px;
- line-height: 16px;
- }
-}
-
-@media only screen and (min-width: 1025px) {
- .additional-info__subtitle {
- font-size: 18px;
- line-height: 18px;
- }
-}
diff --git a/blocks/additional-info/__title/additional-info__title.css b/blocks/additional-info/__title/additional-info__title.css
deleted file mode 100644
index 6d6c784..0000000
--- a/blocks/additional-info/__title/additional-info__title.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.additional-info__title {
- font-size: 28px;
- line-height: 28px;
- margin: 0;
- font-weight: 500;
-}
-
-@media only screen and (min-width: 769px) and (max-width: 1024px) {
- .additional-info__title {
- font-size: 31px;
- line-height: 31px;
- }
-}
-
-@media only screen and (min-width: 1025px) {
- .additional-info__title {
- font-size: 38px;
- line-height: 38px;
- }
-}
diff --git a/blocks/additional-info/additional-info.css b/blocks/additional-info/additional-info.css
index ab41dae..098daee 100644
--- a/blocks/additional-info/additional-info.css
+++ b/blocks/additional-info/additional-info.css
@@ -1,25 +1,40 @@
-@import url(./__title/additional-info__title.css);
-@import url(./__subtitle/additional-info__subtitle.css);
@import url(./__list/additional-info__list.css);
@import url(./__list-item/additional-info__list-item.css);
@import url(./__link/additional-info__link.css);
.additional-info {
- margin: 68px 30px 0;
border-bottom: 1.7px solid #223d46;
- padding-bottom: 40px;
+ padding: 68px 0 40px;
+ margin: 0 30px;
+}
+
+@media only screen and (max-width: 320px) {
+ .additional-info {
+ margin: 0 16px 0;
+ padding: 50px 0 30px;
+ }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.additional-info {
- margin-top: 84px;
- padding-bottom: 50px;
+ padding: 84px 0 50px;
+ margin: 0 40px;
}
}
@media only screen and (min-width: 1025px) {
.additional-info {
- margin-top: 100px;
- padding-bottom: 60px;
+ padding: 100px 0 60px;
+ max-width: 1200px;
+ margin: 0 40px;
}
}
+
+@media only screen and (min-width: 1280px) {
+ .additional-info {
+ margin: 0 auto;
+ }
+}
+
+
+
diff --git a/blocks/arrow-icon/arrow-icon.css b/blocks/arrow-icon/arrow-icon.css
index 00a9b02..b17742d 100644
--- a/blocks/arrow-icon/arrow-icon.css
+++ b/blocks/arrow-icon/arrow-icon.css
@@ -1,10 +1,40 @@
.arrow-icon {
- font-size: 19px;
- width: 34px;
- height: 34px;
- background: url("./blue-arrow.png") center center no-repeat;
+ width: 43px;
+ height: 19px;
+ background: url("./blue-arrow.png") center right no-repeat;
+ background-size: 11px 11px;
}
.arrow-icon:hover {
- background: url("./yellow-arrow.png") center center no-repeat;
+ background: url("./yellow-arrow.png") center right no-repeat;
+ background-size: 11px 11px;
}
+
+@media only screen and (max-width: 320px) {
+ .arrow-icon {
+ width: 26px;
+ height: 22px;
+ background-size: 8px 8px;
+ }
+
+ .arrow-icon:hover {
+ width: 26px;
+ height: 22px;
+ background-size: 8px 8px;
+ }
+}
+
+@media only screen and (min-width: 1280px) {
+ .arrow-icon {
+ width: 61px;
+ height: 39px;
+ background-size: 16px 16px;
+ }
+
+ .arrow-icon:hover {
+ width: 61px;
+ height: 39px;
+ background-size: 16px 16px;
+ }
+}
+
diff --git a/index.html b/index.html
index 199503a..31da964 100644
--- a/index.html
+++ b/index.html
@@ -232,14 +232,14 @@ hello there
- We know a lot
- If you want to, read this.
+ we know a lot
+ If you want to, read this.