.home-search-box{ width : 100%; font-family: numeralLight; margin: 0px auto; form{ button{ background-color : #39383D; margin-right: 3px; border-top-left-radius: 9px; border-bottom-left-radius: 9px; border: 0px; } input{ width : 100%; background-color: #46454A; border: 0px; border-top-right-radius: 9px; border-bottom-right-radius: 9px; color: #ddd; &::placeholder{ padding-right: 0px; color: #ddd; opacity: 0.4; } } } } @media screen and (min-width: 1441px){ .home-search-box{ width : 100%; max-width: 1250px; padding: 80px 0px 30px; form{ width : 850px; input{ font-size: 20px; padding-right: 20px; &::placeholder{ font-size: 20px; } } button{ width : 100px; height: 80px; } } } } @media screen and (min-width: 1008px) and (max-width: 1440px){ .home-search-box{ max-width: 1250px; padding: 80px 0px 10px; form{ width : 850px; input{ font-size: calc(100vw / 65); padding-right: 20px; &::placeholder{ font-size: calc(100vw / 75); } } button{ width : 100px; height: 80px; } } } } @media screen and (min-width: 641px) and (max-width: 1007px){ .home-search-box{ max-width: 900px; padding: 50px 0px 10px; form{ width : 70%; input{ font-size: calc(100vw / 40); padding-right: 20px; &::placeholder{ font-size: calc(100vw / 45); } } button{ width : 80px; height: 60px; } } } } @media screen and (max-width: 640px){ .home-search-box{ max-width: 500px; padding: 50px 0px 30px; form{ width : 100%; padding: 0px 10px; input{ font-size: calc(100vw / 25); padding-right: 20px; &::placeholder{ font-size: calc(100vw / 25); } } button{ width : 60px; height: 50px; } } } }