Add microbit cards section, make responsive

src/components/extension-landing/extension-landing.scss

@@ -256,6 +256,10 @@
         }
     }
 
+    div.cards + div.faq {
+        padding-top: 2rem;
+    }
+
     .faq {
         p {
             margin-bottom: 1.25rem;

src/views/microbit/microbit.jsx

@@ -17,6 +17,7 @@ const ExtensionRequirements = require('../../components/extension-landing/extens
 const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
 const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
 const ProjectCard = require('../../components/extension-landing/project-card.jsx');
+const Button = require('../../components/forms/button.jsx');
 
 const Steps = require('../../components/steps/steps.jsx');
 const Step = require('../../components/steps/step.jsx');
@@ -269,6 +270,35 @@ class MicroBit extends ExtensionLanding {
                         />
                     </Steps>
                 </ExtensionSection>
+                <ExtensionSection className="cards">
+                    <FlexRow
+                        as="section"
+                        className="cards-row"
+                    >
+                        <div className="cards-image-column">
+                            <img
+                                className="cards-image"
+                                src="/images/microbit/microbit-with-scratch.png"
+                            />
+                        </div>
+                        <div className="cards-description-column">
+                            <h2>
+                                <FormattedMessage id="microbit.downloadCardsTitle" />
+                            </h2>
+                            <p>
+                                <FormattedMessage id="microbit.cardsDescription" />
+                            </p>
+                            <p>
+                                <a href="/starter_projects">
+                                    <Button className="download-cards-button large">
+                                        <FormattedMessage id="general.downloadPDF" />
+                                    </Button>
+                                </a>
+                            </p>
+                        </div>
+                    </FlexRow>
+                    <hr />
+                </ExtensionSection>
                 <ExtensionSection className="faq">
                     <h2><FormattedMessage id="microbit.troubleshootingTitle" /></h2>
                     <h3 className="faq-title"><FormattedMessage id="microbit.checkOSVersionTitle" /></h3>

src/views/microbit/microbit.scss

@@ -14,4 +14,60 @@
             }
         }
     }
+
+    .cards {
+        /* ends with <hr>, so no need for extra padding */
+        padding-bottom: 0;
+        /* slightly more padding on top, since <hr> at bottom has its own extra padding */
+        padding-top: 4.5rem;
+    }
+
+    .cards-row {
+        flex-wrap: nowrap;
+    }
+
+    .cards-image-column {
+        width: 50%;
+    }
+
+    .cards-image {
+        width: calc(100% - 4rem);
+        margin-top: 1rem;
+        margin-right: 2rem;
+        margin-bottom: 1rem;
+    }
+
+    .cards-description-column {
+        width: 50%;
+
+        p {
+            font-size: 1.2rem;
+        }
+    }
+
+    .download-cards-button {
+        min-width: 10rem;
+
+        &:before {
+            display: inline-block;
+            background-image: url("/svgs/extensions/download-white.svg");
+            background-repeat: no-repeat;
+            width: 1.5rem;
+            height: 1.5rem;
+            margin-right: .75rem;
+            vertical-align: text-top;
+            content: "";
+        }
+    }
+}
+
+@media #{$medium-and-smaller} {
+    .microbit {
+        .cards-image-column {
+            width: calc(100% - 2rem);
+        }
+        .cards-description-column {
+            width: calc(100% - 2rem);
+        }
+    }
 }