Update the cards with new grouped structure

src/views/cards/cards.scss

 @import "../../colors";
 @import "../../typography";
 
-.cards{
+.cards {
     display: flex;
     margin: 1em 0;
     align-items: center;
@@ -20,11 +20,15 @@
 .cards-container {
     text-align: center;
 
-    .box-content {  
+    .card-row {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        flex-wrap: wrap;
+
         div {
             display: inline-block;
-            margin: 0 .75em;
-            max-width: 25%;
+            padding: .5em;
 
             a {
                 display: block;

src/views/cards/l10n-static.json

 {
-    "cards.allCardsLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/Scratch2Cards.pdf",
-    "cards.danceLink": "//cdn.scratch.mit.edu/scratchr2/static/pdfs/help/DanceCards.pdf",
-    "cards.danceLink": "//cdn.scratch.mit.edu/scratchr2/static/pdfs/help/DanceCards.pdf",
-    "cards.danceThumb": "//cdn.scratch.mit.edu/scratchr2/static/images/help/card-dance-thumb.png",
-    "cards.nameLink": "//cdn.scratch.mit.edu/scratchr2/static/pdfs/help/AnimateYourNameCards.pdf",
-    "cards.nameThumb": "//cdn.scratch.mit.edu/scratchr2/static/images/help/card-animateyourname-thumb.png",
-    "cards.hideLink": "//cdn.scratch.mit.edu/scratchr2/static/pdfs/help/Hide-and-Seek-Cards.pdf",
-    "cards.hideThumb": "//cdn.scratch.mit.edu/scratchr2/static/images/help/card-hideandseek-thumb.png",
-    "cards.changeColorLink": "//cdn.scratch.mit.edu/scratchr2/static/pdfs/help/01_v2_ChangeColor.pdf",
-    "cards.changeColorThumb": "//cdn.scratch.mit.edu/scratchr2/static/images/help/card-changecolor-thumb.png",
-    "cards.moveToBeatLink": "//cdn.scratch.mit.edu/scratchr2/static/pdfs/help/02_v2_MovetoaBeat.pdf",
-    "cards.moveToBeatThumb": "//cdn.scratch.mit.edu/scratchr2/static/images/help/card-movetoabeat-thumb.png",
-    "cards.keyMovesLink": "//cdn.scratch.mit.edu/scratchr2/static/pdfs/help/03_v2_KeyMoves.pdf",
-    "cards.keyMovesThumb": "//cdn.scratch.mit.edu/scratchr2/static/images/help/card-keymoves-thumb.png",
-    "cards.saySomethingLink": "//cdn.scratch.mit.edu/scratchr2/static/pdfs/help/04_v2_SaySomething.pdf",
-    "cards.saySomethingThumb": "//cdn.scratch.mit.edu/scratchr2/static/images/help/card-saysomething-thumb.png",
-    "cards.glideLink": "//cdn.scratch.mit.edu/scratchr2/static/pdfs/help/05_v2_Glide.pdf",
-    "cards.glideThumb": "//cdn.scratch.mit.edu/scratchr2/static/images/help/card-glide-thumb.png",
-    "cards.followMouseLink": "//cdn.scratch.mit.edu/scratchr2/static/pdfs/help/06_v2_FollowtheMouse.pdf",
-    "cards.followMouseThumb": "//cdn.scratch.mit.edu/scratchr2/static/images/help/card-followthemouse-thumb.png",
-    "cards.danceTwistLink": "//cdn.scratch.mit.edu/scratchr2/static/pdfs/help/07_v2_DanceTwist.pdf",
-    "cards.danceTwistThumb": "//cdn.scratch.mit.edu/scratchr2/static/images/help/card-dancetwist-thumb.png",
-    "cards.whirlLink": "//cdn.scratch.mit.edu/scratchr2/static/pdfs/help/08_v2_InteractiveWhirl.pdf",
-    "cards.whirlThumb": "//cdn.scratch.mit.edu/scratchr2/static/images/help/card-interactivewhirl-thumb.png",
-    "cards.animateItLink": "//cdn.scratch.mit.edu/scratchr2/static/pdfs/help/09_v2_AnimateIt.pdf",
-    "cards.animateItThumb": "//cdn.scratch.mit.edu/scratchr2/static/images/help/card-animateit-thumb.png ",
-    "cards.movingAnimationLink": "//cdn.scratch.mit.edu/scratchr2/static/pdfs/help/10_v2_MovingAnimation.pdf",
-    "cards.movingAnimationThumb": "//cdn.scratch.mit.edu/scratchr2/static/images/help/card-movinganimation-thumb.png",
-    "cards.surpriseButtonLink": "//cdn.scratch.mit.edu/scratchr2/static/pdfs/help/11_v2_SurpriseButton.pdf",
-    "cards.surpriseButtonThumb": "//cdn.scratch.mit.edu/scratchr2/static/images/help/card-surprisebutton-thumb.png",
-    "cards.keepScoreLink": "//cdn.scratch.mit.edu/scratchr2/static/pdfs/help/12_v2_KeepScore.pdf",
-    "cards.keepScoreThumb": "//cdn.scratch.mit.edu/scratchr2/static/images/help/card-keepscore-thumb.png"
+    "cards.starterLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/Scratch2Cards.pdf",
+    "cards.nameLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/AnimateYourNameCards.pdf",
+    "cards.pongLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/PongCards.pdf",
+    "cards.storyLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/StoryCards.pdf",
+    "cards.danceLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/DanceCards.pdf",
+    "cards.hideLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/Hide-and-Seek-Cards.pdf"
 }
\ No newline at end of file

src/views/cards/l10n.json

 {
     "cards.introHeader": "Scratch Cards",
     "cards.introContent": "Scratch cards provide a quick way to learn new Scratch code.",
-    "cards.introAllCards": "Get all the Cards",
-    "cards.introAllCardsEnglish": "English",
+    "cards.english": "English",
     "cards.introWikiSupport": "Looking for Scratch Cards in your language? Check <a href=\"http://wiki.scratch.mit.edu/wiki/Scratch_Support_Materials\">Scratch Wiki</a>.",
-    "cards.viewCard": "View Card",
-    "cards.dance": "Dance, Dance, Dance",
+    "cards.viewCard": "View Cards",
+    "cards.starter": "Starter Cards",
     "cards.name": "Animate Your Name",
-    "cards.hide": "Hide and Seek",
-    "cards.changeColor": "Change Color",
-    "cards.moveToBeat": "Move to a Beat",
-    "cards.keyMoves": "Key Moves",
-    "cards.saySomething": "Say Something",
-    "cards.glide": "Glide",
-    "cards.followMouse": "Follow the Mouse",
-    "cards.danceTwist": "Dance Twist",
-    "cards.whirl": "Interactive Whirl",
-    "cards.animateIt": "Animate It",
-    "cards.movingAnimation": "Moving Animation",
-    "cards.surpriseButton": "Surprise Button",
-    "cards.keepScore": "Keep Score"
+    "cards.pong": "Create a Pong Game",
+    "cards.story": "Animate a Story",
+    "cards.dance": "Dance, Dance, Dance",
+    "cards.hide": "Hide and Seek"
 }
\ No newline at end of file