#varianty2New {
    margin: 70px 0 30px 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Dva sloupce s rovnoměrnou šířkou */
    gap: 25px;

    .varianta {
        border-radius: 10px;
        color: #fff;
        padding: 15px;
        transition: all linear 250ms;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.3;

        background: #bbb;

        .panels {
            color: #fff;
        }

        span {
            color: var(--g-color-1);
        }

        .panels {
            display: block;
            text-align: center;
            font-size: 24px;
            font-weight: 600;
            color: #000;

            b {
                font-size: 38px;
                font-weight: 700;
            }
        }

        .vykon {
            display: block;
            text-align: center;
            font-size: 16px;
            font-weight: 400;

            b {
                font-size: 18px;
                font-weight: 600;
            }
        }

        .prices {
            text-align: center;

            div {
                font-size: 19px;
                font-weight: 400;
                padding: 20px 0 2px;
            }

            p {
                margin: 0;
                padding: 0;
            }

            span {
                color: #000;
                font-weight: 500;
                font-size: 15px;
            }

            strong {
                font-weight: 600;
                font-size: 17px;
            }

            b {
                color: #000;
            }

            .big {
                font-size: 30px;
            }
        }

        &.active {
            transform: scale(1.08);
            background: var(--g-color-1);
            border: 5px solid var(--g-color-1);
            color: #fff;

            .panels {
                color: #000;
            }

            span {
                color: #000;
            }
        }
    }
}

@media (max-width: 768px) {
    #varianty2New {
        grid-template-columns: repeat(2, 1fr); /* one item per row */
    }
}



#variantyNew {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* Dva sloupce s rovnoměrnou šířkou */
    gap: 10px;

    .result-label {
        display: block;
        font-size: 0.9rem;
        font-weight: 500;
        padding: 0 0 0.5rem 10px;
        margin: 0;
    }


    .result-value {
        background: var(--g-color-1);
        color: #000;
        transform: scale(1.08);
        padding: 0.5rem 0;
        transition: all linear 250ms;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.3;
        text-align: center;
    }

    #plocha-value {
        color: white;
    }

    .varianta.active {
        color: #000;
        background: var(--g-color-1);
        transform: scale(1.08);
    }

    #vykon-value {
        color: white;
        font-size: 12px;
    }
}

.conditionals .input-group {
    align-items: center;
}

#form-firmy {
    padding-top: 0; !important;
}

#canvas,
#dom_overlay_container,
#animation_container {
    width: min(100vw, 740px);
    height: min(77vw, 520px);
}

@media (max-width: 768px) {
    #odhadovana_spotreba {
        height: 100%;
    }
    #odhadovany_vykon {
        height: 100%;
    }
    #kapacita_baterie {
        height: 100%;
    }
    #variantyNew {
        padding-top: 20px;
    }
}