.course{ main{ header{ padding: 70px 0px 45px; border-bottom:2px solid #4a4a4a; } } &__info{ &--image{ margin-left: 20px; img{ border-top-left-radius: 9px; border-top-right-radius: 9px; border-bottom-right-radius: 9px; border-bottom-left-radius: 24px; } } &--description{ padding-top: 5px; a{ color: #424242; } li{ color: #424242; } h1{ color: white; margin-top: 12px; } p{ color: #D3D3D3; margin-top: 25px; } .course-info-items{ padding: 10px; background-color: #08793d23; border-radius: 10px; i{ color: #4DD35B; } } } } &__options{ &--rate{ border: 2px solid #707070; box-shadow: 0px 0px 20px #f7ff0179; border-radius: 15px; padding-top: 20px; color: white; } &--button{ background-color: #313131; border: 1px solid #707070; color: white; padding: 8px; text-align: center; margin-top: 15px; &:hover{ color: white; } } } &__list{ margin-bottom: 30px; border-radius: 10px; header{ padding: 40px 0px 20px; border: 0px; h2{ color: #4DD35B; } p{ color: #707070; } } } } @media screen and (min-width: 1441px) { .course{ main { max-width: 1350px; } &__info{ flex: 4; &--image{ img{ width: 320px; height: 420px; } } &--description{ a{ font-size: 17px; } li{ font-size: 17px; } h1{ font-size: 50px; } p{ font-size: 16px; } .course-info-items{ width: 220px; margin-top: 20px; & img{ margin-left: 5px; width : 50px; } i{ font-size: 18px; font-family: numeralLight; } p{ font-size: 14px; margin: 0px; } } } } &__options{ flex: 2; &--rate{ width: 315px; height: 200px; margin-bottom: 30px; &__number{ div{ font-size: 20px; } i{ font-size: 15px; } b{ font-size: 50px; } span{ font-size: 18px; transform: translateY(4px); margin-right: 10px; } } h2{ margin-top: 15px; font-size: 20px; } } &--button{ width: 315px; height: 66px; padding: 0px 30px; font-size: 18px; border-radius: 40px; } } &__list{ header{ h2{ font-size: 25px; } p{ font-size: 13px; } } } } } @media screen and (min-width: 1008px) and (max-width: 1440px) { .course{ main { max-width: 1250px; padding: 0px 10px; } &__info{ flex: 3; &--image{ img{ width: 250px; height: 380px; } } &--description{ a{ font-size: calc(100vw / 90); } li{ font-size: calc(100vw / 90); } h1{ font-size: calc(100vw / 40); } p{ font-size: calc(100vw / 80);; } .course-info-items{ width: 45%; margin-top: 20px; & img{ margin-left: 10px; width : 45px; } i{ font-size: calc(100vw / 95); font-family: numeralLight; } p{ font-size: calc(100vw / 100); margin: 0px; } } } } &__options{ flex: 2; &--rate{ width: 70%; height: 160px; margin-bottom: 30px; &__number{ i{ font-size: calc(100vw / 100); } b{ font-size: calc(100vw / 50); } span{ font-size: 18px; transform: translateY(4px); margin-right: 10px; } } h2{ margin-top: 5px; font-size: calc(100vw / 80); } } &--button{ width: 70%; height: 59px; padding: 0px 30px; font-size: calc(100vw / 75); border-radius: 40px; } } &__list{ header{ h2{ font-size: calc(100vw / 65); } p{ font-size: calc(100vw / 100); } } } } } @media screen and (min-width: 641px) and (max-width: 1007px) { .course{ background : black; main { max-width: 900px; padding: 0px 20px; header{ padding: 0px; padding-bottom: 20px; padding-top: 20px; } p{ margin-top: 20px; color: #d3d3d3; font-size: calc(100vw / 45); } } &__info{ flex: 3; &--image{ img{ width: 200px; height: 280px; } } &--description{ a{ font-size: calc(100vw / 50); } // li{ // font-size: calc(100vw / 90); // } h1{ font-size: calc(100vw / 25); margin-top: 0px; } i{ color: #4DD35B; font-size: calc(100vw / 40); } } } &__options{ // display : none !important; flex: 2; &--rate{ // width: 70%; // height: 160px; // margin-bottom: 30px; border: none; box-shadow: 0px 0px 0px #f7ff01b3; &__number{ i{ font-size: calc(100vw / 40); color: white; } b{ font-size: calc(100vw / 40); } span{ font-size: calc(100vw / 28); transform: translateY(4px); } } h2{ margin-top: 5px; font-size: calc(100vw / 40); } } &--button{ width: 48%; // height: 59px; padding: 10px 5px; font-size: calc(100vw / 45); border-radius: 30px; color: #D3D3D3; margin-top: 30px; img{ width: 30px; } } } &__list{ header{ h2{ font-size: calc(100vw / 35); margin-top: 20px; } p{ margin-top: 0px; font-size: calc(100vw / 50); color: #d3d3d3; } } } } } @media screen and (max-width: 640px) { .course{ background : black; main { max-width: 500px; padding: 0px 10px; header{ padding: 0px; padding-bottom: 20px; } p{ margin-top: 20px; color: #d3d3d3; font-size: calc(100vw / 30); } } &__info{ flex: 3; &--image{ img{ width: 150px; height: 220px; } } &--description{ a{ font-size: calc(100vw / 30); } li{ font-size: calc(100vw / 90); } h1{ font-size: calc(100vw / 18); margin-top: 0px; } i{ color: #4DD35B; font-size: calc(100vw / 30); } } } &__options{ // display : none !important; flex: 2; &--rate{ // width: 70%; // height: 160px; // margin-bottom: 30px; border: none; box-shadow: 0px 0px 0px #f7ff01b3; &__number{ i{ font-size: calc(100vw / 40); color: white; } b{ font-size: calc(100vw / 30); } span{ font-size: calc(100vw / 28); transform: translateY(4px); } } h2{ margin-top: 5px; font-size: calc(100vw / 40); } } &--button{ width: 48%; // height: 59px; padding: 5px 5px; font-size: calc(100vw / 35); border-radius: 40px; color: #D3D3D3; img{ width: 25px; } } } &__list{ header{ h2{ font-size: calc(100vw / 25); margin-top: 20px; } p{ margin-top: 0px; font-size: calc(100vw / 35); color: #d3d3d3; } } } } }