.faq { &__light{ .faq{ &__list{ li{ background-color: white !important; border: 1px solid black !important; p{ color: black !important; } } } } } header { width: 100%; margin: 0px auto; padding-top: 40px; h1 { color: white; margin-bottom: 15px; } p { color: $gray11; } input { background-color: $gray5; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border: none; color: white; flex: 1; &::placeholder { color: $gray11; } } button { background-color: $gray1; border: none; margin-right: 2px; width: 70px; height: 60px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } } &__list { width: 100%; margin: 0px auto !important; padding-top: 30px !important; li{ background-color: $gray5; margin-bottom: 15px; cursor: pointer; border-radius: 5px; } &--itemHeader { border-top-right-radius: 5px; border-top-left-radius: 5px; padding: 10px; strong { color: $green; } img{ width: 30px; } } &--itemBody { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding:0px 10px 30px; p { color: white; } } } } @media screen and (min-width: 1441px) { .faq { header { max-width: 800px; h1 { font-size: 24px; } p { font-size: 16px; margin-bottom: 30px; } input { padding: 10px 20px 10px 0px; font-size: 17px; } img { width: 30px; } } &__list{ max-width: 1040px; strong{ font-size: 16px; } p{ font-size: 15px; } } } } @media screen and (min-width: 1008px) and (max-width: 1440px) { .faq { header { max-width: 700px; h1 { font-size: calc(100vw / 55); } p { font-size: calc(100vw / 95); margin-bottom: 20px; } input { padding: 5px 10px 5px 0px; font-size: calc(100vw / 95); } img { width: 30px; } button{ width: 60px; height: 50px; } } &__list{ max-width: 900px; strong{ font-size: calc(100vw / 95); } p{ font-size: calc(100vw / 100); } } } } @media screen and (min-width: 641px) and (max-width: 1007px) { .faq { background : black; padding: 50px 20px 20px; header { max-width: 700px; h1 { font-size: calc(100vw / 25); } p { font-size: calc(100vw / 35); margin-bottom: 30px; } input { padding: 5px 10px 5px 0px; font-size: calc(100vw / 40); } img { width: 35px; } button{ width: 60px; height: 55px; } } &__list{ max-width: 700px; strong{ font-size: calc(100vw / 40); } p{ font-size: calc(100vw / 45); } } } } @media screen and (max-width: 640px) { .faq { background : black; padding: 50px 20px 20px; header { max-width: 700px; h1 { font-size: calc(100vw / 18); } p { font-size: calc(100vw / 30); margin-bottom: 30px; } input { padding: 5px 10px 5px 0px; font-size: calc(100vw / 30); } img { width: 30px; } button{ width: 50px; height: 45px; } } &__list{ strong{ font-size: calc(100vw / 30); } p{ font-size: calc(100vw / 34); } } } }