.discount-code{ width: 100%; border: 1px solid #707070; border-radius: 10px; padding: 20px 30px; h3{ color: white; margin: 0px; } input{ background-color : rgba(255, 255, 255, 0.06); border-top-right-radius: 10px; border-bottom-right-radius: 10px; border: 0px; color: white; &::placeholder{ color: white; } } button{ background-color : #9CDF52; border-top-left-radius: 10px; color: white; border-bottom-left-radius: 10px; border: none; } } @media screen and (min-width : 1441px) { .discount-code{ h3{ font-size: 20px; } input{ padding: 20px 10px 20px 0px; width: 200px; font-size: 14px; &::placeholder{ font-size: 10px; } } button{ padding: 0px 20px; font-size: 14px; } } } @media screen and (min-width: 1008px) and (max-width: 1440px) { .discount-code{ h3{ font-size: calc(100vw / 82); } input{ padding: 20px 10px 20px 0px; width: 240px; font-size: calc(100vw / 90); &::placeholder{ font-size: calc(100vw / 130); } } button{ padding: 0px 20px; font-size: calc(100vw / 90); } } } @media screen and (min-width: 641px) and (max-width: 1007px) { .discount-code{ padding: 10px; h3{ font-size: calc(100vw / 40); } input{ padding: 10px; width: 300px; font-size: calc(100vw / 45); &::placeholder{ font-size: calc(100vw / 50); } margin-right: 5px; } button{ width : 90px; font-size: calc(100vw / 40); } } } @media screen and (max-width: 640px) { .discount-code{ padding: 10px; h3{ font-size: calc(100vw / 34); max-width: 100px; } input{ padding: 10px; width: 180px; font-size: calc(100vw / 30); &::placeholder{ font-size: calc(100vw / 40); } margin-right: 5px; } button{ width : 60px; font-size: calc(100vw / 30); } } }