.home-courses { width: 100%; margin: 0px auto; border-top: 1px solid #424242; border-bottom: 1px solid #424242; position: relative; margin-top: 30px; padding: 20px 10px 50px; font-family: numeralLight; header{ margin-bottom: 20px; h1{ font-family: numeralMedium; color: white; margin: 0px; } span{ color: #aaa; } } &__more{ position: absolute; bottom: 0px; left: 50%; transform: translate(-50%, +50%); background-color: #292929; padding-right: 5px; color: #9CDF52; &:hover{ color: #9CDF52; } } } @media screen and (min-width: 1441px) { .home-courses { max-width: 1250px; 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 / 60); } span{ font-size: calc(100vw / 100); } } &__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); } } } @media screen and (max-width: 640px) { .home-courses { max-width: 500px; header{ h1{ font-size: calc(100vw / 25); } span{ font-size: calc(100vw / 34); } } &__more{ font-size: calc(100vw / 30); } } }