.wrapper{
    width: 80%;
    height: 100vh;
    margin-inline: auto;
    display: grid;
    place-content: center;
}

.table{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    gap: calc(var(--gap)*1);
    margin-block: calc(var(--gap)*2);

    input{
        width: 100%;
        display: inline-block;
        background: var(--foreground);
        color: var(--surface);
        font-size: calc(var(--fs)*1.25);
        padding: calc(var(--gap)*.7) calc(var(--gap)*2);
        border: none;
        border-radius: calc(var(--border-radius)*1.5);

        &:focus,
        &:focus-within
        &:focus-visible{
            border: none;
            outline: none;
            background: var(--foreground);
        }

        &:nth-child(3){
            grid-column: 1 / -1;
        }
    }

    button{
        grid-column: 1 / -1;
    }
}

.result{
    width: 100%;
    min-height: fit-content;
    background: var(--clr-blue);
    color: var(--background);
    font-size: calc(var(--fs)*1.25);
    padding: calc(var(--gap)*.7) calc(var(--gap)*2);
    border: none;
    border-radius: calc(var(--border-radius)*.5);
    margin-block: calc(var(--gap)*3);
}