Using Flexbox, how can I configure the buttons so that they're all the same width when flex-direction: column is applied for mobile? It would typically be simple, however, the buttons are two levels beneath the parent and I can't change the HTML markup. Here's a demo with the HTML and CSS below:
.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;}<div class="multi-cta-group"><div class="multi-cta-container"><a href="#" class="btn btn-primary">CTA label for video</a></div><div class="multi-cta-container"><a href="#" class="btn btn-primary">Shop</a></div><div class="multi-cta-container"><a href="#" class="btn btn-primary">Learn more</a></div><div class="multi-cta-container"><a href="#" class="btn btn-primary">Subscribe now</a></div></div>