main.scss
//Main SCSS file of the plugin //Imports @import 'vars'; //SCSS Structure .plugin-container{ h2{ color: $secondary; } .counter-wrapper{ display: flex; justify-content: center; align-items: center; @media(max-width: $mobile) { flex-wrap: wrap; } .display{ height: 135px; background-color: $secondary; margin-right: 1rem; padding: 1rem; flex-basis: 50%; @media(max-width: $mobile) { flex-basis: 100%; margin-right: 0rem; margin-bottom: 1rem; } p{ margin-bottom: 1rem; } } .increase{ height: 135px; margin-left: 1rem; background-color: $secondary; padding: 1rem; flex-basis: 50%; @media(max-width: $mobile) { flex-basis: 100%; margin-left: 0rem; margin-top: 1rem; } p{ margin-bottom: 1rem; } .inputs{ display: flex; justify-content: center; align-items: center; input{ width: 100%; } button{ padding: 5px; img{ width: 20px; height: 20px; } } } } } }