Hi @KlaraSchmitt - I'm addressing this you, because I see you've answered a lot of Hubs Calcite questions.
I'm using a Card Group similar to the example here, where there are five total cards - three in the first row, and two below. (I'm using a card-shaped class, sample code below). Instead of having everything left-justified, I'd like everything to be centered. So on a medium/large screen, the bottom two are centered under the top three, and as the layout adapts with smaller sizes, the cards keep centering.
I've tried a number of things, including creating a style that includes align-content: center !important and tried wrapping that round the last two cards, but that didn't work.
What's the easiest way to do this?
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="calcite-web">
<div class="card-base card-shaped">
<figure class="card-image-wrap">
<img class="card-image" src="https://hubqacdn.arcgis.com/opendata-ui/assets/assets/images/bridge3-ab9c41a43f1bf4379a90134a0658f4c...">
</figure>
<div class="card-content">
<h5>
<calcite-link href="https://www.google.com" rel="noopener" role="presentation" calcite-hydrated=""><div style="text-align: center;"><b style="font-family: var(--fontsHeadingFamily),Avenir Next; font-size: var(--font-size-h5); background-color: initial;">Conservation</b></div></calcite-link>
</h5>
<div class="credit">
<calcite-chip id="photo-1" value="calcite chip" icon="camera" scale="xs" appearance="solid" kind="neutral" calcite-hydrated="" aria-describedby="calcite-tooltip-44aad912-5c4c-8698-6042-ccb2d322a8b8"></calcite-chip>
</div>
</div>
</div>
</div>
</div>
