@import "./Lesson/index.scss"; .course { &-light{ .course{ &__header { border-bottom: 2px solid $gray12; } &__info { &--description { a { color: $gray5; } li { color: $gray5; } h1 { color: $gray5; } p { color: $gray6; } .course-info-items { background-color: #9cdf5222; i { color: $green; } } } } &__options { &--rate { border: none; background-color: $gray12; box-shadow: none; color: $gray5; } &--button { background-color: $gray12; border: none; color: $gray5; transition: all 0.3s; &:hover { color: $gray5; background-color: $gray; } } } &__list { &--header { h2 { color: $green; } p { color: $gray7; } } } } } &-dark{ .course{ &__header { border-bottom: 2px solid $gray5; } &__info { &--description { a { color: $gray5; } h1{ color: white; } li { color: $gray5; } p { color: $gray6; } .course-info-items { background-color: #08793d23; i { color: $green; } } } } &__options { &--rate { border: 2px solid $gray7; box-shadow: 0px 0px 20px #f7ff0179; color: white; } &--button { background-color: #313131; border: 1px solid $gray7; color: white; &:hover { color: white; } } } &__list { &--header { h2 { color: $green; } p { color: $gray7; } } } } } &__header { padding: 30px 0px 45px; } &__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; h1 { margin-top: 12px; } p { margin-top: 25px; } .course-info-items { padding: 10px; border-radius: 10px; } } } &__options { &--rate { border-radius: 15px; padding-top: 20px; } &--button { padding: 8px; text-align: center; margin-top: 15px; } } &__list { margin-bottom: 30px; border-radius: 10px; &--header { padding: 20px 0px 20px !important; border: 0px !important; } } } @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: 350px; } } &--description { h1 { font-size: calc(100vw / 50); } p { font-size: calc(100vw / 100); } .course-info-items { width: 45%; margin-top: 20px; & img { margin-left: 10px; width: 40px; } i { font-size: calc(100vw / 120); font-family: numeralLight; } p { font-size: calc(100vw / 130); margin: 0px; } } } } &__options { flex: 2; &--rate { width: 70%; height: 160px; margin-bottom: 30px; &__number { margin-bottom: 15px; 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 / 100); 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 { main { max-width: 900px; padding: 0px 20px; p { margin-top: 20px; color: $gray6; font-size: calc(100vw / 45); } } &__header { padding: 0px; padding-bottom: 20px; padding-top: 20px; } &__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: $green; 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: $gray6; 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: $gray7; } } } } } @media screen and (max-width: 640px) { .course { margin-top: 20px; &__header { padding: 0px; padding-bottom: 20px; } main { max-width: 500px; padding: 0px 10px; p { margin-top: 20px; color: $gray7; 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: $green; 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: $gray6; img { width: 25px; } } } &__list { &--header { h2 { font-size: calc(100vw / 25); margin-top: 20px; } p { margin-top: 0px; font-size: calc(100vw / 35); color: $gray6; } } } } }