.lesson { transition: all 0.3s; overflow : hidden; border-bottom: 1px solid $gray9; &-light { header { background-color : $gray13; border: 1px solid $gray9; h4 { color: $green6; } div { color: $gray5; } } .lesson{ &__files{ border-left: 1px solid $gray9; border-right: 1px solid $gray9; p{ color: $gray5; background-color: $gray12; } &--sample{ &:hover{ background-color: $gray12; } color: $gray5; a{ color: $gray5; } } &--active{ // border-bottom: 1px solid $gray11; } } } } &-dark{ header { background-color: #414141; h4 { color: $green; } div { color: $gray10; } } .lesson{ &__files{ border-left: 1px solid $gray9; border-right: 1px solid $gray9; p{ color: white; background-color: $gray1; } &--sample{ &:hover{ background-color: rgb(58, 58, 58); } color: white; a{ color: white; } } &--active{ // border-bottom: 1px solid $gray9; } } } } &__active{ // border-bottom-left-radius: 10px; // border-bottom-right-radius: 10px; } header { // border: 1px solid $gray9 !important; border-top-right-radius: 5px !important; border-top-left-radius: 5px; padding: 5px 15px !important; cursor: pointer; h4 { margin: 0px; } img{ width: 40px; } } &__files{ padding : 0px !important; transition: all 0.15s ease-in; overflow: hidden; p{ padding: 10px 20px; margin: 0px !important; } & img{ width: 30px; margin-right: 15px; } &--sample{ transition: all 0.5s; cursor: pointer; padding: 5px 0px; &___active{ transition: all 0.5s; transform: scale(1.3); } li{ text-align: center; } h5{ margin-right: 30px; margin-bottom: 0px; } } } } @media screen and (min-width: 1441px) { .lesson { header { img{ margin-right: 5px; } h4 { font-size: 18px; margin-right: 30px; } div { font-size: 16px; } } &__duration{ width: 175px; text-align: center; } &__files{ &--sample{ li{ width : 120px; font-size: 16px; } h5{ font-size: 16px; } } } } } @media screen and (min-width: 1008px) and (max-width: 1440px) { .lesson { header { img{ margin-right: 5px; width : 30px; } h4 { font-size: calc(100vw / 95); margin-right: 30px; } div { font-size: calc(100vw / 95); } } &__duration{ width: 170px; text-align: center; } &__files{ &--sample{ li{ width : 120px; font-size: calc(100vw / 95); } h5{ font-size: calc(100vw/ 100); } } &--active{ padding: 5px !important; } } } } @media screen and (min-width: 641px) and (max-width: 1007px) { .lesson { border-radius: 10px; margin-bottom: 15px; header { border-top-right-radius: 10px; border-top-left-radius: 10px; h4 { font-size: calc(100vw / 40); } div { font-size: calc(100vw / 50); } img{ width: 30px; } } &__duration{ text-align: center; } &__files{ border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding : 0px !important; &--sample{ margin-bottom: 20px; img{ width: 30px; } li{ font-size: calc(100vw / 40); width: 100px; } h5{ font-size: calc(100vw/ 43); margin-right: 10px; } } &--active{ padding: 25px 5px !important; } } } } @media screen and (max-width: 640px) { .lesson { // border-radius: 10px; margin-bottom: 15px; header { border-top-right-radius: 10px; border-top-left-radius: 10px; padding: 5px 5px !important; h4 { font-size: calc(100vw / 30); } div { font-size: calc(100vw / 35); } img{ width: 30px; } } &__duration{ text-align: center; } &__files{ // border-bottom-left-radius: 10px; // border-bottom-right-radius: 10px; padding: 0px !important; &--sample{ img{ width: 30px; } li{ font-size: calc(100vw / 33); width: 60px; } h5{ font-size: calc(100vw/ 33); margin-right: 15px; } } &--active{ padding: 15px 5px !important; } } } }