<Section fullWidth background padding>
<div className="inner-container">
<h6>The secret sauce</h6>
<p>If we use CSS Grid's minmax property, we can set the minimum width of a grid item before it wraps to 100% width. We can also use CSS variables to change grid properties on the fly. Take a look at the codepen example below:</p>

<iframe height="800" scrolling="no" title="Responsive Cards w/ CSS Grid" src="https://codepen.io/aja9104/embed/bJLLjj?default-tab=result&theme-id=dark" frameborder="no" loading="lazy" allowtransparency allowfullscreen>
</iframe>
</div>
</Section>

Liquid cards is a fully responsive design pattern that uses a fluid CSS Grid method instead of hardcoded media queries to create perfectly responsive cards on any device.
<div>
<a href="https://codepen.io/aja9104/pen/bJLLjj" className="btn btn--pink btn--outline">View on Codepen</a>
</div>

SCSS Mixin

Liquid Cards

Summary

The secret sauce