@import "./Course/index.scss"; .home-courses { width: 100%; margin: 0px auto; position: relative; padding: 20px 10px 30px; font-family: numeralLight; &-dark { border-top: 1px solid $gray8; border-bottom: 1px solid $gray8; } &-light{ border-top: none !important; border-bottom: 1px solid $gray12; header{ h1{ color : $green !important; } a{ color: $green !important; } } .home-courses__more{ background-color: white !important; } } header { margin-bottom: 20px; h1 { font-family: numeralMedium; color: white; margin-bottom: 10px; } span { color: $gray; } a { display: none; } } &__more { position: absolute; bottom: 0px; left: 50%; transform: translate(-50%, +50%); background-color: black; padding-right: 5px; color: $green; &:hover { color: $green; } } &__list { scrollbar-width: 0px; &::-webkit-scrollbar { display: none; width: 0px; } } } @media screen and (min-width: 1441px) { .home-courses { max-width: 1350px; header { h1 { font-size: 20px; } span { font-size: 12px; } } &__more { font-size: 13px; } } } @media screen and (min-width: 1008px) and (max-width: 1440px) { .home-courses { max-width: 1250px; header { h1 { font-size: calc(100vw / 75); } span { font-size: calc(100vw / 120); } } &__more { font-size: calc(100vw / 100); } } } @media screen and (min-width: 641px) and (max-width: 1007px) { .home-courses { max-width: 900px; header { h1 { font-size: calc(100vw / 40); } span { font-size: calc(100vw / 90); } } &__more { font-size: calc(100vw / 90); } &__list { overflow-x: scroll; } } } @media screen and (max-width: 640px) { .home-courses { max-width: 500px; border: 0px !important; padding: 0px !important; margin-top: 15px; header { h1 { font-size: calc(100vw / 25); margin-bottom: 10px; } span { font-size: calc(100vw / 34); } a { display: flex; color: $green; font-size: calc(100vw / 28); } } &__more { display: none !important; } &__list { overflow-x: scroll; &::-webkit-scrollbar { scrollbar-width: 0px; display: none; } } } }