* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    width: 100vw;
    height: 100vh;
    body {
        width: 100vw;
        height: 100vh;
        background-color: lightgoldenrodyellow;
        display: grid;
        grid-template-rows: min-content auto;
        div.content {

        }
        div.tools {

        }
    }
}
span.keto-wrapper {
    display: inline-block;
    .v { background-color: violet; }
    .c { background-color: cadetblue; }
    svg {
        width: 100%;
        height: 100%;
        background-color: bisque;
        display: block;
    }
    >div.keto {
        font-size: 3rem;
        display: grid;
        width: min-content;
        height: 2em;
        &.cv {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr;
        }
        &.ccv {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            span.v {
                grid-row: 1 / 3;
                grid-column: 2;
            }
        }
        &.cccv {
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            span.v {
                grid-row: 1 / 3;
                grid-column: 3;
            }
            span.c:nth-child(2) {
                background-color: coral;
                grid-row: 1 / 3;
                grid-column: 2;
            }
        }
    }
}