.lesson { transition: all 0.5 ease-in; &__active{ border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } header { background-color: #414141; // border: 1px solid #b3b3b3 !important; padding: 5px 15px !important; cursor: pointer; h4 { color: #9cdf52; margin: 0px; } div { color: #cccccc; } img{ width: 40px; } } &__files{ padding : 0px !important; border-left: 1px solid #b3b3b3; border-right: 1px solid #b3b3b3; transition: all 0.4s ease-in; & img{ width: 40px; } &--sample{ margin-bottom: 15px; color: white; li{ text-align: center; } h5{ margin-right: 30px; margin-bottom: 0px; } } &--active{ padding : 30px 15px 20px !important; border-bottom: 1px solid #b3b3b3; } } } @media screen and (min-width: 1441px) { .lesson { header { img{ margin-right: 5px; } h4 { font-size: 21px; margin-right: 30px; } div { font-size: 18px; } } &__duration{ width: 260px; text-align: center; } &__files{ &--sample{ li{ width : 120px; font-size: 19px; } h5{ font-size: 19px; } } } } } @media screen and (min-width: 1008px) and (max-width: 1440px) { .lesson { header { img{ margin-right: 5px; } h4 { font-size: calc(100vw / 75); margin-right: 30px; } div { font-size: calc(100vw / 80); } } &__duration{ width: 250px; text-align: center; } &__files{ &--sample{ li{ width : 120px; font-size: calc(100vw / 75); } h5{ font-size: calc(100vw/ 75); } } &--active{ padding: 15px 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; 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: 5px; } } &--active{ padding: 15px 5px !important; } } } }