@media only screen and (max-width: 1440px) {
    section {
        width: 47%;
    }

    .wrapper:before {
        width: 450px;
    }
}
@media only screen and (max-width: 1280px) {
    section {
        width: 50%;
    }

    .wrapper:before {
        width: 398px;
    }
}
@media only screen and (max-width: 1149px) {
    section {
        width: 55%;
    }

    .row {
        grid-template-columns: repeat(3, 11.733vw);
    }

    .wrapper:before {
        width: 420px;
    }
}
@media only screen and (max-width: 1024px) {
    section {
        width: 60%;
    }

    .row {
        grid-template-columns: repeat(3, 13.733vw);
    }
    input {
        padding: 13px; font-size: 26px;
    }

    .wrapper:before {
        width: 411px;
    }
    button {
        height: 80px; width: 82px;
    }

    .results {
        font-size: 70px;
    }
}
@media only screen and (max-width: 896px) {
    section {
        width: 65%;
    }

    .row {
        grid-template-columns: repeat(3, 14.733vw);
    }

    .wrapper:before {
        width: 347px;
    }
}
@media only screen and (max-width: 768px){
    section {
        width: 70%;
    }

    .row {
        grid-template-columns: repeat(3, 15.733vw);
    }

    .wrapper:before {
        width: 276px;
    }
    button {
        height: 75px; width: 77px;
    }
}
@media only screen and (max-width: 597px){
    section {
        width: 75%; padding: 30px;
    }

    .row {
        grid-template-columns: repeat(3, 18.733vw);
    }
    label {
        letter-spacing: 1px; font-size: 13px;
    }
    input {
        padding: 10px; font-size: 23px;
    }

    .wrapper:before {
        width: 273px;
    }
    button {
        height: 65px; width: 67px;
    }

    .results {
        font-size: 65px;
    }
}
@media only screen and (max-width: 431px) {
    section {
        width: 92%; 
        padding:50px 20px;
        border-radius: 20px 20px 110px 20px;
    }

    .row {
        grid-template-columns: repeat(3, 25.733vw); 
        justify-content: space-evenly;
    }
    label {
        letter-spacing: 1.5px;
    }

    input {
        padding: 15px;
        font-size: 21px;
    }

    .wrapper {
        margin: 30px 0;
    }
    button {
        height: 65px; 
        width: 67px;
    }
    svg {
        width: 26px; 
        height: 24px;
    }
    .wrapper:before {
        width: 130px;
    }
    .wrapper:after {
        display: inline-block;
        content: " ";
        height: 2px;
        width: 130px;
        background-color: hsl(0, 0%, 86%);
        vertical-align: text-top;
    }
}
@media only screen and (max-width: 390px) {
    .wrapper:before, .wrapper:after{
        width: 113px;
    }
}
@media only screen and (max-width: 375px) {
    input {
        font-size: 18px;
    }
    .wrapper:before, .wrapper:after{
        width: 108px;
    }
    .results {
        font-size: 56px;
    }
}
@media only screen and (max-width: 320px) {
    section {
        width: 97%;
        border-radius: 20px 20px 95px 20px;
    }

    .row {
        grid-template-columns: repeat(3, 27.733vw); 
        justify-content: space-evenly;
    }
    label {
        font-size: 11px;
    }
    input {
        font-size: 15px;
    }

    .wrapper:before, .wrapper:after {
        width: 96px;
    }

    .results {
        font-size: 56px;
    }
}
@media only screen and (max-width: 280px) {
    input {
        padding: 13px;
        font-size: 14px;
    }

    .wrapper:before, .wrapper:after {
        width: 78px;
    }
    button {
        height: 60px;
        width: 62px;
    }

    .results {
        font-size: 53px;
    }
}