Add o-deck--4-column modifiers (#1480)

Author: tylersticka

.changeset/sweet-geckos-smile.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add o-deck--4-column modifiers

src/objects/deck/deck.scss

@@ -45,7 +45,7 @@
  * maximum or to coordinate with adjacent elements.
  */
 
-@for $i from 2 through 3 {
+@for $i from 2 through 4 {
   .o-deck--#{$i}-column {
     @include media-query.breakpoint-classes($from: s, $to: xl) {
       grid-template-columns: repeat(#{$i}, 1fr);

src/objects/deck/deck.stories.mdx

@@ -36,7 +36,7 @@ const articlesTemplateSource = (_src, storyContext) => {
       control: {
         type: 'range',
         min: 2,
-        max: 3,
+        max: 4,
         step: 1,
       },
       defaultValue: 3,
@@ -86,7 +86,7 @@ By default, the `o-deck` class will use CSS Grid Layout to arrange child element
 
 While automatic columns are convenient, there are times when a specific column count is desired. For example, you may want to limit a design to three columns at larger breakpoints to align with adjacent elements.
 
-To do this, add a modifier class in the format of `o-deck--X-column@Y`, where `X` is the desired column count (from 2 to 3) and `Y` is the desired [breakpoint](/docs/design-tokens-breakpoint--page) (from `s` to `xl`). In this example, we force the grid to display three columns starting from the `m` breakpoint.
+To do this, add a modifier class in the format of `o-deck--X-column@Y`, where `X` is the desired column count (from 2 to 4) and `Y` is the desired [breakpoint](/docs/design-tokens-breakpoint--page) (from `s` to `xl`). In this example, we force the grid to display three columns starting from the `m` breakpoint.
 
 <Canvas>
   <Story

src/prototypes/team/example/team-list.scss

@@ -31,14 +31,4 @@
       }
     }
   }
-
-  .team-container {
-    display: grid;
-    grid-gap: ms.step(0);
-    grid-template-columns: repeat(auto-fill, minmax(11.5em, 1fr));
-
-    @media (min-width: breakpoint.$l) {
-      grid-template-columns: repeat(auto-fill, minmax(15.25em, 1fr));
-    }
-  }
 }

src/prototypes/team/example/team-list.twig

@@ -58,7 +58,11 @@
   {% embed '@cloudfour/objects/container/container.twig' with {
   "class": "o-container--pad" } %}
     {% block content %}
-      <div class="team-container">
+      {% embed '@cloudfour/objects/deck/deck.twig' with {
+        class: 'o-deck--2-column@s o-deck--4-column@l',
+        avatars: avatars
+      } only %}
+        {% block content %}
           {% for avatar in avatars %}
             {% embed '@cloudfour/components/card/card.twig' with { href: '#', avatar: avatar, class: 'team-member' } only %}
               {% block heading %}
@@ -72,7 +76,8 @@
               {% endblock %}
             {% endembed %}
           {% endfor %}
-      </div>
+        {% endblock %}
+      {% endembed %}
     {% endblock %}
   {% endembed %}
   {% include '@cloudfour/components/ground-nav/ground-nav.twig' with {