diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss index dc44bc5..1248a45 100644 --- a/src/styles/_footer.scss +++ b/src/styles/_footer.scss @@ -9,6 +9,7 @@ .footer-wrapper { display: flex; justify-content: space-between; + gap: 2.4rem; } .footer-nav-list { @@ -20,6 +21,8 @@ .footer-nav-list-item { a { + white-space: nowrap; + text-overflow: ellipsis; font-size: 1.8rem; color: $white; @include roboto; @@ -55,7 +58,7 @@ max-width: 37rem; } -@media (max-width: 800px) { +@media (max-width: 1200px) { .footer-wrapper { flex-direction: column; gap: 4rem; @@ -66,9 +69,15 @@ } } -@media (max-width: 560px) { +@media (max-width: 700px) { .footer-nav-list { grid-template-columns: repeat(2, auto); column-gap: 2.4rem; } } + +// @media (max-width: 390px) { +// .footer-nav-list { +// grid-template-columns: auto; +// } +// } diff --git a/src/styles/_general.scss b/src/styles/_general.scss index 57c2772..8cbfcf5 100644 --- a/src/styles/_general.scss +++ b/src/styles/_general.scss @@ -1,5 +1,5 @@ -@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); -@import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap'); * { margin: 0; @@ -71,3 +71,9 @@ h6 { .react-calendar__month-view__days { column-gap: 1.8rem; } + +@media screen and (max-width: 900px) { + .container { + padding: 0 1.5rem; + } +} diff --git a/src/styles/_videos.scss b/src/styles/_videos.scss index 45775b8..4f7b233 100644 --- a/src/styles/_videos.scss +++ b/src/styles/_videos.scss @@ -1,7 +1,3 @@ -.videos { - // padding: 5.6rem 0; -} - .videos-inner { display: flex; flex-direction: column; @@ -40,3 +36,23 @@ color: $black; } } + +// Media + +@media screen and (max-width: 1150px) { + .videos-items { + grid-template-columns: 1fr 1fr; + } + .videos-item-video { + min-height: 30vw; + } +} + +@media screen and (max-width: 780px) { + .videos-items { + grid-template-columns: 1fr; + } + .videos-item-video { + min-height: 40vw; + } +}