@layer template {
    .button-group {
        display: flex;
        flex-direction: column;
        padding-top: 6.25vw;
        padding-bottom: 7.1875vw;
        background: var(--background)
    }

    @media (min-width: 1024px) {
        .button-group {
            padding-top:40px;
            padding-bottom: 46px
        }
    }

    .button-group .button-group__text+.button-group__buttons {
        margin-top: 4.6875vw
    }

    @media (min-width: 1024px) {
        .button-group .button-group__text+.button-group__buttons {
            margin-top:20px
        }
    }

    .button-group .button-group__buttons {
        display: grid
    }

    @media (max-width: 1023px) {
        .button-group .button-group__buttons {
            grid-gap:4.6875vw
        }

        .button-group .button-group__buttons[data-row-count-mobile="1"] {
            grid-template-columns: 1fr
        }

        .button-group .button-group__buttons[data-row-count-mobile="2"] {
            grid-template-columns: 1fr 1fr
        }
    }

    @media (min-width: 1024px) {
        .button-group .button-group__buttons {
            display:flex;
            justify-content: space-between
        }

        .button-group .button-group__buttons[data-row-count] {
            flex-wrap: wrap;
            gap: 20px;
            justify-content: flex-start
        }

        .button-group .button-group__buttons[data-row-count="1"] .button {
            width: calc(100% + -0px)
        }

        .button-group .button-group__buttons[data-row-count="2"] .button {
            width: calc(50% - 10px)
        }

        .button-group .button-group__buttons[data-row-count="3"] .button {
            width: calc(100% / 3 - 13.3333333333px)
        }

        .button-group .button-group__buttons[data-row-count="4"] .button {
            width: calc(25% - 15px)
        }

        .button-group .button-group__buttons[data-row-count="5"] .button {
            width: calc(20% - 16px)
        }

        .button-group .button-group__buttons[data-row-count="6"] .button {
            width: calc(100% / 6 - 16.6666666667px)
        }

        .button-group .button-group__buttons[data-row-count="7"] .button {
            width: calc(100% / 7 - 17.1428571429px)
        }

        .button-group .button-group__buttons[data-row-count="8"] .button {
            width: calc(12.5% - 17.5px)
        }
    }

    .button-group .button-group__buttons .button {
        align-self: initial;
        width: 100%;
        background: var(--button-background);
        box-shadow: 0 .9375vw 0 0 var(--button-shadow)
    }

    @media (min-width: 1024px) {
        .button-group .button-group__buttons .button {
            box-shadow:0 6px 0 0 var(--button-shadow)
        }
    }

    .button-group .button-group__buttons .button:hover {
        background: var(--button-background-hover);
        box-shadow: 0 0
    }

    .button-group .button-group__buttons .button.hidden {
        display: none;
        visibility: hidden;
        opacity: 0;
        pointer-events: none
    }
}

.button-group[data-v-4f578310] {
    --background: var(--46fc068f);
    --button-background: var(--04c837a9);
    --button-background-hover: var(--5120b2d8);
    --button-shadow: var(--54fcaeac)
}