diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss index 46f7e88..c2c5ecc 100644 --- a/src/components/common/footer/footer.module.scss +++ b/src/components/common/footer/footer.module.scss @@ -140,8 +140,17 @@ nav { display: flex; - gap: tovw(88px, 'default', 64px); + gap: tovw(88px, 'default', 55px); + + @media screen and (max-width: 1180px) { + gap: tovw(65px, 'default', 35px); + } + @media screen and (max-width: 1024px) { + justify-content: space-between; + } + + @media screen and (max-width: 800px) { display: grid; column-gap: tovw(97px, 'tablet', 97px); grid-template-columns: repeat(2, 1fr); @@ -207,10 +216,42 @@ } } +.connect__links__mobile { + display: none; + + @media screen and (max-width: 800px) { + > li:last-of-type { + display: flex; + justify-content: center; + gap: tovw(24px, 'mobile'); + + div { + width: tovw(24px, 'default', 24px); + height: tovw(24px, 'default', 24px); + } + } + } +} + .sub__footer { + ul:first-child { + display: none; + + @media screen and (max-width: 800px) { + display: unset; + } + } + + display: flex; + flex-direction: column; + gap: tovw(32px, 'default', 32px); margin-top: tovw(18px, 'default', 18px); margin-bottom: tovw(44px, 'default', 36px); + @media screen and (max-width: 800px) { + margin-top: tovw(32px, 'tablet', 32px); + } + a, p { font-size: tovw(18px, 'default', 14px); @@ -223,6 +264,7 @@ display: flex; justify-content: space-between; width: 100%; + @media screen and (max-width: 800px) { align-items: center; flex-direction: column; @@ -233,10 +275,12 @@ } } - div { + > div { display: flex; gap: tovw(37px, 'default', 24px); + @media screen and (max-width: 800px) { + gap: tovw(32px, 'mobile'); margin-bottom: tovw(32px, 'tablet', 32px); } } diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx index 3684b6c..2750184 100644 --- a/src/components/common/footer/index.tsx +++ b/src/components/common/footer/index.tsx @@ -147,6 +147,20 @@ export const Footer = () => {