[class*="button-"] {
    flex: 1;
    height: 48px;
}

.button-primary {
    background-color: var(--noninteractive-background-brand);
    color: var(--interactive-text-default-inverse);
}
.button-secondary {
    background-color: var(--blue-800);
    color: var(--interactive-text-default-inverse);
}
.button-outline {
    background-color: transparent;
    border: 1px solid var(--neutral-50);
    color: var(--interactive-text-default-inverse);
}

@media (max-width: 1024px) {
    [class*="button-"] {
        flex: 1;
        height: 44px;
    }
}

@media (max-width: 767px) {
    [class*="button-"] {
        flex: 1;
        height: 40px;
    }
}