Containers

Container max-widths are based on screen sizes.

<div class="c-ctn">default is extra large. Duo invidunt labore erat dolore elitr ea lorem amet, dolores sed et sadipscing ut elitr nonumy sed dolor, nonumy elitr. Duo invidunt labore erat dolore elitr ea lorem amet, dolores sed et sadipscing ut elitr nonumy sed dolor, nonumy elitr.</div>
<div class="c-ctn m-lg">large. Duo invidunt labore erat dolore elitr ea lorem amet, dolores sed et sadipscing ut elitr nonumy sed dolor, nonumy elitr. Duo invidunt labore erat dolore elitr ea lorem amet, dolores sed et sadipscing ut elitr nonumy sed dolor, nonumy elitr.</div>
<div class="c-ctn m-md">medium. Duo invidunt labore erat dolore elitr ea lorem amet, dolores sed et sadipscing ut elitr nonumy sed dolor, nonumy elitr. Duo invidunt labore erat dolore elitr ea lorem amet, dolores sed et sadipscing ut elitr nonumy sed dolor, nonumy elitr.</div>
<div class="c-ctn m-sm">small. Duo invidunt labore erat dolore elitr ea lorem amet, dolores sed et sadipscing ut elitr nonumy sed dolor, nonumy elitr.</div>
<!-- DEMO ONLY -->
<style>
    .c-ctn {
        background-color: var(--goafe-color-support-success-500);
        margin-bottom: 1em;
        text-align: center;
    }
</style>