Сделать все кнопки одинаковой ширины, когда кнопки сложены для мобильных устройств и когда кнопки вложены на два уровня ⇐ CSS

[Anonymous]

Как с помощью Flexbox настроить кнопки так, чтобы все они имели одинаковую ширину, когда столбец flex-direction: применяется для мобильных устройств? Обычно это было бы просто, однако кнопки находятся на два уровня ниже родительского, и я не могу изменить разметку HTML. Ниже приведена демонстрация HTML и CSS:

Код: Выделить всё

.multi-cta-group {
border: 1px solid gray;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
gap: 16px;
margin: 20px;
padding: 20px;
}

.multi-cta-container {
border: 1px solid red;
flex: 1;
}

.multi-cta-container a {
border: 1px solid lime;
flex: 1;
}

Код: Выделить всё

[url=#]CTA label for video[/url]

[url=#]Shop
[/url]

[url=#]Learn more
[/url]

[url=#]Subscribe now
[/url]

Подробнее здесь: https://stackoverflow.com/questions/793 ... and-when-b