From 466348ef0d150fae83838d133322b5b729477949 Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Thu, 30 Nov 2023 19:08:24 +0100
Subject: [PATCH 1/7] build: remove storybook@6

---
 packages/react/.storybook/main.js    |  4 ----
 packages/react/.storybook/manager.js |  4 ----
 packages/react/.storybook/theme.js   |  8 --------
 packages/react/package.json          | 11 +----------
 packages/react/stories/index.js      | 14 ++++----------
 packages/react/stories/index.test.js | 24 ------------------------
 6 files changed, 5 insertions(+), 60 deletions(-)
 delete mode 100644 packages/react/.storybook/main.js
 delete mode 100644 packages/react/.storybook/manager.js
 delete mode 100644 packages/react/.storybook/theme.js
 delete mode 100644 packages/react/stories/index.test.js

diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
deleted file mode 100644
index 11ced5e29..000000000
--- a/packages/react/.storybook/main.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  stories: ['../stories/index.js'],
-  core: { builder: 'webpack5' }
-}
diff --git a/packages/react/.storybook/manager.js b/packages/react/.storybook/manager.js
deleted file mode 100644
index 2fe5ab4a6..000000000
--- a/packages/react/.storybook/manager.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { addons } from '@storybook/addons'
-import theme from './theme'
-
-addons.setConfig({ theme })
diff --git a/packages/react/.storybook/theme.js b/packages/react/.storybook/theme.js
deleted file mode 100644
index 090c67b3b..000000000
--- a/packages/react/.storybook/theme.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { create } from '@storybook/theming/create'
-
-export default create({
-  base: 'light',
-  brandTitle: 'Microlink SDK',
-  brandUrl: 'https://github.com/microlinkhq/sdk',
-  brandImage: 'https://cdn.microlink.io/logo/large.png'
-})
diff --git a/packages/react/package.json b/packages/react/package.json
index fa5b7989d..4ed5efa44 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -43,12 +43,6 @@
     "@rollup/plugin-node-resolve": "latest",
     "@rollup/plugin-replace": "latest",
     "@rollup/plugin-terser": "latest",
-    "@storybook/addon-storyshots": "~6.5.16",
-    "@storybook/addons": "~6.5.16",
-    "@storybook/builder-webpack5": "~6.5.16",
-    "@storybook/manager-webpack5": "~6.5.16",
-    "@storybook/react": "~6.5.16",
-    "@storybook/theming": "~6.5.16",
     "babel-plugin-transform-react-pure-class-to-function": "latest",
     "babel-plugin-transform-react-remove-prop-types": "latest",
     "enzyme": "latest",
@@ -64,8 +58,7 @@
     "rollup": "latest",
     "rollup-plugin-filesize": "latest",
     "rollup-plugin-visualizer": "latest",
-    "styled-components": "latest",
-    "unfetch": "latest"
+    "styled-components": "latest"
   },
   "engines": {
     "node": ">= 10"
@@ -75,8 +68,6 @@
   ],
   "scripts": {
     "build": "NODE_ENV=production rollup -c rollup.config.js --bundleConfigAsCjs",
-    "build-storybook": "NODE_ENV=production build-storybook --quiet",
-    "dev": "start-storybook -p 6006",
     "start": "node scripts/start.js",
     "pretest": "npm run build",
     "test": "NODE_ENV=test jest --detectOpenHandles"
diff --git a/packages/react/stories/index.js b/packages/react/stories/index.js
index 998c99528..45dbd2d7d 100644
--- a/packages/react/stories/index.js
+++ b/packages/react/stories/index.js
@@ -1,5 +1,3 @@
-import 'unfetch/polyfill'
-
 import { storiesOf } from '@storybook/react'
 
 import { urls, urlsVideo, urlsAudio, urlsIframe } from './data'
@@ -83,8 +81,7 @@ storiesOf('setData', module)
     createStoryEntry({
       setData: {
         image: {
-          url:
-            'https://media.tenor.com/images/5d4791abbfa98823cdbcd82b7ece2ced/tenor.gif'
+          url: 'https://media.tenor.com/images/5d4791abbfa98823cdbcd82b7ece2ced/tenor.gif'
         },
         title: 'Microlink Query Language',
         description: 'Turns any web into data',
@@ -114,8 +111,7 @@ storiesOf('setData', module)
             size_pretty: '8.94 MB'
           },
           video: {
-            url:
-              'https://cdn.microlink.io/data/assets/youtube.com!watch!v=9P6rdqiybaw/r3---sn-ab5l6nzl.googlevideo.com!videoplayback!c=WEB&dur=552.054&ei=-fbwXa7LFq2Khwaf6JnoDg&expire=15.mp4',
+            url: 'https://cdn.microlink.io/data/assets/youtube.com!watch!v=9P6rdqiybaw/r3---sn-ab5l6nzl.googlevideo.com!videoplayback!c=WEB&dur=552.054&ei=-fbwXa7LFq2Khwaf6JnoDg&expire=15.mp4',
             type: 'mp4',
             duration: 552.007943,
             size: 54633895,
@@ -132,8 +128,7 @@ storiesOf('setData', module)
         media: ['iframe', 'video', 'audio'],
         setData: data => ({
           iframe: {
-            html:
-              "<marquee>welcome to microlink.io! You're the visitor number 12242! CONGRATS!! You win an API key, just send 1$ to hello@microlink.io for receiving it into your inbox</marquee>",
+            html: "<marquee>welcome to microlink.io! You're the visitor number 12242! CONGRATS!! You win an API key, just send 1$ to hello@microlink.io for receiving it into your inbox</marquee>",
             scripts: []
           },
           audio: {
@@ -145,8 +140,7 @@ storiesOf('setData', module)
             size_pretty: '8.94 MB'
           },
           video: {
-            url:
-              'https://cdn.microlink.io/data/assets/youtube.com!watch!v=9P6rdqiybaw/r3---sn-ab5l6nzl.googlevideo.com!videoplayback!c=WEB&dur=552.054&ei=-fbwXa7LFq2Khwaf6JnoDg&expire=15.mp4',
+            url: 'https://cdn.microlink.io/data/assets/youtube.com!watch!v=9P6rdqiybaw/r3---sn-ab5l6nzl.googlevideo.com!videoplayback!c=WEB&dur=552.054&ei=-fbwXa7LFq2Khwaf6JnoDg&expire=15.mp4',
             type: 'mp4',
             duration: 552.007943,
             size: 54633895,
diff --git a/packages/react/stories/index.test.js b/packages/react/stories/index.test.js
deleted file mode 100644
index 85639ee02..000000000
--- a/packages/react/stories/index.test.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/* global jest */
-
-import initStoryshots from '@storybook/addon-storyshots'
-import { Headers, Request, Response } from 'node-fetch'
-
-import 'jest-styled-components'
-
-jest.mock('@microlink/mql', () =>
-  require('@microlink/mql/' + require('@microlink/mql/package.json').browser)
-)
-
-if (!globalThis.Headers) {
-  globalThis.Headers = Headers
-}
-
-if (!globalThis.Request) {
-  globalThis.Request = Request
-}
-
-if (!globalThis.Response) {
-  globalThis.Response = Response
-}
-
-initStoryshots()

From e2b7c53b1edf7e6430d3df6e3329534fd6f6e743 Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Thu, 30 Nov 2023 22:00:34 +0100
Subject: [PATCH 2/7] build: add storybook@7

---
 packages/react/.storybook/main.js             |    24 +
 packages/react/.storybook/preview.js          |    14 +
 packages/react/package.json                   |    12 +-
 .../stories/__snapshots__/index.test.js.snap  | 15352 ----------------
 packages/react/stories/import.test.js         |    10 -
 packages/react/stories/index.js               |   203 -
 packages/react/stories/media.stories.js       |    45 +
 packages/react/stories/props.stories.js       |    72 +
 packages/react/stories/require.test.js        |    11 -
 packages/react/stories/set-data.stories.js    |    89 +
 packages/react/stories/style.stories.js       |    62 +
 packages/react/stories/{ => util}/data.js     |     0
 .../{createStoryEntry.js => util/story.js}    |     6 +-
 13 files changed, 319 insertions(+), 15581 deletions(-)
 create mode 100644 packages/react/.storybook/main.js
 create mode 100644 packages/react/.storybook/preview.js
 delete mode 100644 packages/react/stories/__snapshots__/index.test.js.snap
 delete mode 100644 packages/react/stories/import.test.js
 delete mode 100644 packages/react/stories/index.js
 create mode 100644 packages/react/stories/media.stories.js
 create mode 100644 packages/react/stories/props.stories.js
 delete mode 100644 packages/react/stories/require.test.js
 create mode 100644 packages/react/stories/set-data.stories.js
 create mode 100644 packages/react/stories/style.stories.js
 rename packages/react/stories/{ => util}/data.js (100%)
 rename packages/react/stories/{createStoryEntry.js => util/story.js} (91%)

diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
new file mode 100644
index 000000000..f04778160
--- /dev/null
+++ b/packages/react/.storybook/main.js
@@ -0,0 +1,24 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'
+  ],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y'
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: {
+        useSWC: true
+      }
+    }
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+}
+export default config
diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
new file mode 100644
index 000000000..c3dab1183
--- /dev/null
+++ b/packages/react/.storybook/preview.js
@@ -0,0 +1,14 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+}
+
+export default preview
diff --git a/packages/react/package.json b/packages/react/package.json
index 4ed5efa44..e6076dd17 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -43,6 +43,13 @@
     "@rollup/plugin-node-resolve": "latest",
     "@rollup/plugin-replace": "latest",
     "@rollup/plugin-terser": "latest",
+    "@storybook/addon-a11y": "7",
+    "@storybook/addon-essentials": "7",
+    "@storybook/addon-interactions": "7",
+    "@storybook/blocks": "7",
+    "@storybook/react": "7",
+    "@storybook/react-webpack5": "7",
+    "@storybook/test": "7",
     "babel-plugin-transform-react-pure-class-to-function": "latest",
     "babel-plugin-transform-react-remove-prop-types": "latest",
     "enzyme": "latest",
@@ -58,6 +65,7 @@
     "rollup": "latest",
     "rollup-plugin-filesize": "latest",
     "rollup-plugin-visualizer": "latest",
+    "storybook": "7",
     "styled-components": "latest"
   },
   "engines": {
@@ -68,8 +76,10 @@
   ],
   "scripts": {
     "build": "NODE_ENV=production rollup -c rollup.config.js --bundleConfigAsCjs",
-    "start": "node scripts/start.js",
+    "build-storybook": "storybook build",
     "pretest": "npm run build",
+    "start": "node scripts/start.js",
+    "storybook": "storybook dev -p 6006",
     "test": "NODE_ENV=test jest --detectOpenHandles"
   },
   "license": "MIT",
diff --git a/packages/react/stories/__snapshots__/index.test.js.snap b/packages/react/stories/__snapshots__/index.test.js.snap
deleted file mode 100644
index 39f56414f..000000000
--- a/packages/react/stories/__snapshots__/index.test.js.snap
+++ /dev/null
@@ -1,15352 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots media audio 1`] = `
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-  className="c0"
->
-  <a
-    className="c1"
-    href="https://open.spotify.com/track/1W2919zs8SBCLTrOB1ftQT?si=4PcqgjH5RlWCvB5q4ukdnw"
-  >
-    https://open.spotify.com/track/1W2919zs8SBCLTrOB1ftQT?si=4PcqgjH5RlWCvB5q4ukdnw
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://open.spotify.com/track/1W2919zs8SBCLTrOB1ftQT?si=4PcqgjH5RlWCvB5q4ukdnw"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c6 microlink_card__content"
-    >
-      <span
-        className="c7"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://open.spotify.com/track/1W2919zs8SBCLTrOB1ftQT?si=4PcqgjH5RlWCvB5q4ukdnw"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c11 microlink_card__content"
-    >
-      <span
-        className="c12"
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c13 microlink_card c3"
-    direction="ltr"
-    href="https://open.spotify.com/track/1W2919zs8SBCLTrOB1ftQT?si=4PcqgjH5RlWCvB5q4ukdnw"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c15 microlink_card__content"
-    >
-      <span
-        className="c16"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-</div>
-`;
-
-exports[`Storyshots media iframe 1`] = `
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-<div
-  className="c0"
->
-  <a
-    className="c1"
-    href="https://twitter.com/futurism/status/882987478541533189"
-  >
-    https://twitter.com/futurism/status/882987478541533189
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://twitter.com/futurism/status/882987478541533189"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c6 microlink_card__content"
-    >
-      <span
-        className="c7"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-</div>
-`;
-
-exports[`Storyshots media image 1`] = `
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-  className="c0"
->
-  <a
-    className="c1"
-    href="https://www.apple.com/music/"
-  >
-    https://www.apple.com/music/
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c6 microlink_card__content"
-    >
-      <span
-        className="c7"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c11 microlink_card__content"
-    >
-      <span
-        className="c12"
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c13 microlink_card c3"
-    direction="ltr"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c15 microlink_card__content"
-    >
-      <span
-        className="c16"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-</div>
-`;
-
-exports[`Storyshots media logo 1`] = `
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-  className="c0"
->
-  <a
-    className="c1"
-    href="https://www.apple.com/music/"
-  >
-    https://www.apple.com/music/
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c6 microlink_card__content"
-    >
-      <span
-        className="c7"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c11 microlink_card__content"
-    >
-      <span
-        className="c12"
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c13 microlink_card c3"
-    direction="ltr"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c15 microlink_card__content"
-    >
-      <span
-        className="c16"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-</div>
-`;
-
-exports[`Storyshots media screenshot 1`] = `
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-  className="c0"
->
-  <a
-    className="c1"
-    href="https://www.apple.com/music/"
-  >
-    https://www.apple.com/music/
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c6 microlink_card__content"
-    >
-      <span
-        className="c7"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c11 microlink_card__content"
-    >
-      <span
-        className="c12"
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c13 microlink_card c3"
-    direction="ltr"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c15 microlink_card__content"
-    >
-      <span
-        className="c16"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-</div>
-`;
-
-exports[`Storyshots media video 1`] = `
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-  className="c0"
->
-  <a
-    className="c1"
-    href="https://www.facebook.com/natgeo/videos/10156364216738951/"
-  >
-    https://www.facebook.com/natgeo/videos/10156364216738951/
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.facebook.com/natgeo/videos/10156364216738951/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c6 microlink_card__content"
-    >
-      <span
-        className="c7"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.facebook.com/natgeo/videos/10156364216738951/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c11 microlink_card__content"
-    >
-      <span
-        className="c12"
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c13 microlink_card c3"
-    direction="ltr"
-    href="https://www.facebook.com/natgeo/videos/10156364216738951/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c15 microlink_card__content"
-    >
-      <span
-        className="c16"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-</div>
-`;
-
-exports[`Storyshots props autoPlay (disabled) 1`] = `
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-  className="c0"
->
-  <a
-    className="c1"
-    href="https://www.facebook.com/natgeo/videos/10156364216738951/"
-  >
-    https://www.facebook.com/natgeo/videos/10156364216738951/
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.facebook.com/natgeo/videos/10156364216738951/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c6 microlink_card__content"
-    >
-      <span
-        className="c7"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.facebook.com/natgeo/videos/10156364216738951/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c11 microlink_card__content"
-    >
-      <span
-        className="c12"
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c13 microlink_card c3"
-    direction="ltr"
-    href="https://www.facebook.com/natgeo/videos/10156364216738951/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c15 microlink_card__content"
-    >
-      <span
-        className="c16"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-</div>
-`;
-
-exports[`Storyshots props contrast 1`] = `
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-transition-property: background,border-color;
-  transition-property: background,border-color;
-  will-change: background,border-color;
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c2:hover {
-  background-color: var(--microlink-hover-background-color,#f5f8fa);
-  border-color: var(--microlink-hover-border-color,#8899A680);
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-  -webkit-transition-property: background,border-color;
-  transition-property: background,border-color;
-  will-change: background,border-color;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c13:hover {
-  background-color: var(--microlink-hover-background-color,#f5f8fa);
-  border-color: var(--microlink-hover-border-color,#8899A680);
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-  className="c0"
->
-  <a
-    className="c1"
-    href="https://www.apple.com/music/"
-  >
-    https://www.apple.com/music/
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c6 microlink_card__content"
-    >
-      <span
-        className="c7"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c11 microlink_card__content"
-    >
-      <span
-        className="c12"
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c13 microlink_card c3"
-    direction="ltr"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c15 microlink_card__content"
-    >
-      <span
-        className="c16"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-</div>
-`;
-
-exports[`Storyshots props controls (disabled) 1`] = `
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-  className="c0"
->
-  <a
-    className="c1"
-    href="https://www.facebook.com/natgeo/videos/10156364216738951/"
-  >
-    https://www.facebook.com/natgeo/videos/10156364216738951/
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.facebook.com/natgeo/videos/10156364216738951/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c6 microlink_card__content"
-    >
-      <span
-        className="c7"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.facebook.com/natgeo/videos/10156364216738951/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c11 microlink_card__content"
-    >
-      <span
-        className="c12"
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c13 microlink_card c3"
-    direction="ltr"
-    href="https://www.facebook.com/natgeo/videos/10156364216738951/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c15 microlink_card__content"
-    >
-      <span
-        className="c16"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-</div>
-`;
-
-exports[`Storyshots props default 1`] = `
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-  className="c0"
->
-  <a
-    className="c1"
-    href="https://www.apple.com/music/"
-  >
-    https://www.apple.com/music/
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c6 microlink_card__content"
-    >
-      <span
-        className="c7"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c11 microlink_card__content"
-    >
-      <span
-        className="c12"
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c13 microlink_card c3"
-    direction="ltr"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c15 microlink_card__content"
-    >
-      <span
-        className="c16"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-</div>
-`;
-
-exports[`Storyshots props direction + contrast 1`] = `
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: row-reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse;
-  -webkit-transition-property: background,border-color;
-  transition-property: background,border-color;
-  will-change: background,border-color;
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c2:hover {
-  background-color: var(--microlink-hover-background-color,#f5f8fa);
-  border-color: var(--microlink-hover-border-color,#8899A680);
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-  -webkit-flex-direction: column-reverse;
-  -ms-flex-direction: column-reverse;
-  flex-direction: column-reverse;
-  -webkit-transition-property: background,border-color;
-  transition-property: background,border-color;
-  will-change: background,border-color;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c13:hover {
-  background-color: var(--microlink-hover-background-color,#f5f8fa);
-  border-color: var(--microlink-hover-border-color,#8899A680);
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-  className="c0"
->
-  <a
-    className="c1"
-    href="https://www.apple.com/music/"
-  >
-    https://www.apple.com/music/
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="rtl"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c6 microlink_card__content"
-    >
-      <span
-        className="c7"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="rtl"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c11 microlink_card__content"
-    >
-      <span
-        className="c12"
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c13 microlink_card c3"
-    direction="rtl"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c15 microlink_card__content"
-    >
-      <span
-        className="c16"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-</div>
-`;
-
-exports[`Storyshots props direction 1`] = `
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: row-reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse;
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-  -webkit-flex-direction: column-reverse;
-  -ms-flex-direction: column-reverse;
-  flex-direction: column-reverse;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-  className="c0"
->
-  <a
-    className="c1"
-    href="https://www.apple.com/music/"
-  >
-    https://www.apple.com/music/
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="rtl"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c6 microlink_card__content"
-    >
-      <span
-        className="c7"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="rtl"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c11 microlink_card__content"
-    >
-      <span
-        className="c12"
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c13 microlink_card c3"
-    direction="rtl"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c15 microlink_card__content"
-    >
-      <span
-        className="c16"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-</div>
-`;
-
-exports[`Storyshots props lazy 1`] = `
-Array [
-  .c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c5 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c5::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c5::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c11 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c11::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c11::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c15 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c15::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c15::before {
-  padding-bottom: 0;
-}
-
-.c15::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c6 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c13 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c17 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c10 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c3 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c3:active,
-.c3:hover {
-  outline: 0;
-}
-
-.c14 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c14:active,
-.c14:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 18px 14px;
-  margin: 0 0 32px;
-  background: #2b2b2b;
-  color: #e8417d;
-  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
-  font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter, monospace;
-  border-radius: 5px;
-  min-width: 300px;
-  max-width: 100%;
-  overflow: scroll;
-}
-
-.c4:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c5 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c14 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://microlink.io"
-    >
-      https://microlink.io
-    </a>
-    <div>
-      <pre
-        className="c2"
-      >
-        {
-  "lazy": false
-}
-      </pre>
-    </div>
-    <a
-      className="c3 microlink_card c4"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <div
-        className="c5 c6 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c7 microlink_card__content"
-      >
-        <span
-          className="c8"
-        />
-        <span
-          className="c9"
-        />
-        <span
-          className="c9"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c10"
-        />
-      </div>
-    </a>
-    <a
-      className="c3 microlink_card c4"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <div
-        className="c11 c6 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c12 microlink_card__content"
-      >
-        <span
-          className="c13"
-        />
-        <span
-          className="c10"
-        />
-      </div>
-    </a>
-    <a
-      className="c14 microlink_card c4"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <div
-        className="c15 c6 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c16 microlink_card__content"
-      >
-        <span
-          className="c17"
-        />
-        <span
-          className="c9"
-        />
-        <span
-          className="c9"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c10"
-        />
-      </div>
-    </a>
-  </div>,
-  .c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c5 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c5::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c5::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c11 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c11::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c11::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c15 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c15::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c15::before {
-  padding-bottom: 0;
-}
-
-.c15::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c6 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c13 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c17 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c10 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c3 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c3:active,
-.c3:hover {
-  outline: 0;
-}
-
-.c14 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c14:active,
-.c14:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 18px 14px;
-  margin: 0 0 32px;
-  background: #2b2b2b;
-  color: #e8417d;
-  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
-  font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter, monospace;
-  border-radius: 5px;
-  min-width: 300px;
-  max-width: 100%;
-  overflow: scroll;
-}
-
-.c4:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c5 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c14 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://microlink.io"
-    >
-      https://microlink.io
-    </a>
-    <div>
-      <pre
-        className="c2"
-      >
-        {
-  "lazy": {
-    "threshold": 1
-  }
-}
-      </pre>
-    </div>
-    <a
-      className="c3 microlink_card c4"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <div
-        className="c5 c6 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c7 microlink_card__content"
-      >
-        <span
-          className="c8"
-        />
-        <span
-          className="c9"
-        />
-        <span
-          className="c9"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c10"
-        />
-      </div>
-    </a>
-    <a
-      className="c3 microlink_card c4"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <div
-        className="c11 c6 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c12 microlink_card__content"
-      >
-        <span
-          className="c13"
-        />
-        <span
-          className="c10"
-        />
-      </div>
-    </a>
-    <a
-      className="c14 microlink_card c4"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <div
-        className="c15 c6 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c16 microlink_card__content"
-      >
-        <span
-          className="c17"
-        />
-        <span
-          className="c9"
-        />
-        <span
-          className="c9"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c10"
-        />
-      </div>
-    </a>
-  </div>,
-]
-`;
-
-exports[`Storyshots props loading 1`] = `
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-  className="c0"
->
-  <a
-    className="c1"
-    href="https://microlink.io"
-  >
-    https://microlink.io
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://microlink.io"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c6 microlink_card__content"
-    >
-      <span
-        className="c7"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://microlink.io"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c11 microlink_card__content"
-    >
-      <span
-        className="c12"
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c13 microlink_card c3"
-    direction="ltr"
-    href="https://microlink.io"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c15 microlink_card__content"
-    >
-      <span
-        className="c16"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-</div>
-`;
-
-exports[`Storyshots props mediaRef 1`] = `
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-  className="c0"
->
-  <a
-    className="c1"
-    href="https://www.facebook.com/natgeo/videos/10156364216738951/"
-  >
-    https://www.facebook.com/natgeo/videos/10156364216738951/
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.facebook.com/natgeo/videos/10156364216738951/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c6 microlink_card__content"
-    >
-      <span
-        className="c7"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.facebook.com/natgeo/videos/10156364216738951/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c11 microlink_card__content"
-    >
-      <span
-        className="c12"
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c13 microlink_card c3"
-    direction="ltr"
-    href="https://www.facebook.com/natgeo/videos/10156364216738951/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c15 microlink_card__content"
-    >
-      <span
-        className="c16"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-</div>
-`;
-
-exports[`Storyshots setData function 1`] = `
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-  className="c0"
->
-  <a
-    className="c1"
-    href="https://microlink.io"
-  >
-    https://microlink.io
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://microlink.io"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c6 microlink_card__content"
-    >
-      <span
-        className="c7"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://microlink.io"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c11 microlink_card__content"
-    >
-      <span
-        className="c12"
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c13 microlink_card c3"
-    direction="ltr"
-    href="https://microlink.io"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c15 microlink_card__content"
-    >
-      <span
-        className="c16"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-</div>
-`;
-
-exports[`Storyshots setData object 1`] = `
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-  className="c0"
->
-  <a
-    className="c1"
-    href="https://microlink.io"
-  >
-    https://microlink.io
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://microlink.io"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c6 microlink_card__content"
-    >
-      <span
-        className="c7"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://microlink.io"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c11 microlink_card__content"
-    >
-      <span
-        className="c12"
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c13 microlink_card c3"
-    direction="ltr"
-    href="https://microlink.io"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c15 microlink_card__content"
-    >
-      <span
-        className="c16"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-</div>
-`;
-
-exports[`Storyshots setData prefer media 1`] = `
-Array [
-  .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://youtube.com"
-    >
-      https://youtube.com
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://youtube.com"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c6 microlink_card__content"
-      >
-        <span
-          className="c7"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-  </div>,
-  .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://example.com"
-    >
-      https://example.com
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://example.com"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c6 microlink_card__content"
-      >
-        <span
-          className="c7"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-  </div>,
-]
-`;
-
-exports[`Storyshots style border radius 1`] = `
-Array [
-  .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://www.apple.com/music/"
-    >
-      https://www.apple.com/music/
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://www.apple.com/music/"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "borderRadius": ".42857em",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c6 microlink_card__content"
-      >
-        <span
-          className="c7"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://www.apple.com/music/"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "borderRadius": ".42857em",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c11 microlink_card__content"
-      >
-        <span
-          className="c12"
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c13 microlink_card c3"
-      direction="ltr"
-      href="https://www.apple.com/music/"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "borderRadius": ".42857em",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c15 microlink_card__content"
-      >
-        <span
-          className="c16"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-  </div>,
-  .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://microlink.io"
-    >
-      https://microlink.io
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "borderRadius": "6px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c6 microlink_card__content"
-      >
-        <span
-          className="c7"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "borderRadius": "6px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c11 microlink_card__content"
-      >
-        <span
-          className="c12"
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c13 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "borderRadius": "6px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c15 microlink_card__content"
-      >
-        <span
-          className="c16"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-  </div>,
-  .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://microlink.io"
-    >
-      https://microlink.io
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "borderRadius": "10px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c6 microlink_card__content"
-      >
-        <span
-          className="c7"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "borderRadius": "10px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c11 microlink_card__content"
-      >
-        <span
-          className="c12"
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c13 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "borderRadius": "10px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c15 microlink_card__content"
-      >
-        <span
-          className="c16"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-  </div>,
-]
-`;
-
-exports[`Storyshots style height 1`] = `
-Array [
-  .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://www.apple.com/music/"
-    >
-      https://www.apple.com/music/
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://www.apple.com/music/"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "height": "150px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c6 microlink_card__content"
-      >
-        <span
-          className="c7"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://www.apple.com/music/"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "height": "150px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c11 microlink_card__content"
-      >
-        <span
-          className="c12"
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c13 microlink_card c3"
-      direction="ltr"
-      href="https://www.apple.com/music/"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "height": "150px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c15 microlink_card__content"
-      >
-        <span
-          className="c16"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-  </div>,
-  .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://microlink.io"
-    >
-      https://microlink.io
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "height": "175px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c6 microlink_card__content"
-      >
-        <span
-          className="c7"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "height": "175px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c11 microlink_card__content"
-      >
-        <span
-          className="c12"
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c13 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "height": "175px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c15 microlink_card__content"
-      >
-        <span
-          className="c16"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-  </div>,
-  .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://microlink.io"
-    >
-      https://microlink.io
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "height": "200px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c6 microlink_card__content"
-      >
-        <span
-          className="c7"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "height": "200px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c11 microlink_card__content"
-      >
-        <span
-          className="c12"
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c13 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "height": "200px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c15 microlink_card__content"
-      >
-        <span
-          className="c16"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-  </div>,
-  .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://microlink.io"
-    >
-      https://microlink.io
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "height": "250px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c6 microlink_card__content"
-      >
-        <span
-          className="c7"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "height": "250px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c11 microlink_card__content"
-      >
-        <span
-          className="c12"
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c13 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "height": "250px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c15 microlink_card__content"
-      >
-        <span
-          className="c16"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-  </div>,
-  .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://microlink.io"
-    >
-      https://microlink.io
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "height": "300px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c6 microlink_card__content"
-      >
-        <span
-          className="c7"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "height": "300px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c11 microlink_card__content"
-      >
-        <span
-          className="c12"
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c13 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "height": "300px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c15 microlink_card__content"
-      >
-        <span
-          className="c16"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-  </div>,
-  .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://microlink.io"
-    >
-      https://microlink.io
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "height": "350px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c6 microlink_card__content"
-      >
-        <span
-          className="c7"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "height": "350px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c11 microlink_card__content"
-      >
-        <span
-          className="c12"
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c13 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "height": "350px",
-          "marginBottom": "20px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c15 microlink_card__content"
-      >
-        <span
-          className="c16"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-  </div>,
-]
-`;
-
-exports[`Storyshots style misc 1`] = `
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-  className="c0"
->
-  <a
-    className="c1"
-    href="https://www.apple.com/music/"
-  >
-    https://www.apple.com/music/
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    style={
-      Object {
-        "boxShadow": "0 1px 4px 0 hsla(0, 0%, 0%, 0.2)",
-        "fontFamily": "Nitti, \\"Microsoft YaHei\\", 微软雅黑, monospace",
-        "marginBottom": "20px",
-      }
-    }
-    target="_blank"
-  >
-    <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c6 microlink_card__content"
-    >
-      <span
-        className="c7"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c2 microlink_card c3"
-    direction="ltr"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    style={
-      Object {
-        "boxShadow": "0 1px 4px 0 hsla(0, 0%, 0%, 0.2)",
-        "fontFamily": "Nitti, \\"Microsoft YaHei\\", 微软雅黑, monospace",
-        "marginBottom": "20px",
-      }
-    }
-    target="_blank"
-  >
-    <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c11 microlink_card__content"
-    >
-      <span
-        className="c12"
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-  <a
-    className="c13 microlink_card c3"
-    direction="ltr"
-    href="https://www.apple.com/music/"
-    rel="noopener noreferrer"
-    style={
-      Object {
-        "boxShadow": "0 1px 4px 0 hsla(0, 0%, 0%, 0.2)",
-        "fontFamily": "Nitti, \\"Microsoft YaHei\\", 微软雅黑, monospace",
-        "marginBottom": "20px",
-      }
-    }
-    target="_blank"
-  >
-    <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
-    />
-    <div
-      className="c15 microlink_card__content"
-    >
-      <span
-        className="c16"
-      />
-      <span
-        className="c8"
-      />
-      <span
-        className="c8"
-        style={
-          Object {
-            "marginBottom": "12px",
-          }
-        }
-      />
-      <span
-        className="c9"
-      />
-    </div>
-  </a>
-</div>
-`;
-
-exports[`Storyshots style width 1`] = `
-Array [
-  .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://www.apple.com/music/"
-    >
-      https://www.apple.com/music/
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://www.apple.com/music/"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "marginBottom": "20px",
-          "width": "300px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c6 microlink_card__content"
-      >
-        <span
-          className="c7"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://www.apple.com/music/"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "marginBottom": "20px",
-          "width": "300px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c11 microlink_card__content"
-      >
-        <span
-          className="c12"
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c13 microlink_card c3"
-      direction="ltr"
-      href="https://www.apple.com/music/"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "marginBottom": "20px",
-          "width": "300px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c15 microlink_card__content"
-      >
-        <span
-          className="c16"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-  </div>,
-  .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://microlink.io"
-    >
-      https://microlink.io
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "marginBottom": "20px",
-          "width": "400px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c6 microlink_card__content"
-      >
-        <span
-          className="c7"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "marginBottom": "20px",
-          "width": "400px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c11 microlink_card__content"
-      >
-        <span
-          className="c12"
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c13 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "marginBottom": "20px",
-          "width": "400px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c15 microlink_card__content"
-      >
-        <span
-          className="c16"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-  </div>,
-  .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://microlink.io"
-    >
-      https://microlink.io
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "marginBottom": "20px",
-          "width": "500px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c6 microlink_card__content"
-      >
-        <span
-          className="c7"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "marginBottom": "20px",
-          "width": "500px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c11 microlink_card__content"
-      >
-        <span
-          className="c12"
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c13 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "marginBottom": "20px",
-          "width": "500px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c15 microlink_card__content"
-      >
-        <span
-          className="c16"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-  </div>,
-  .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://microlink.io"
-    >
-      https://microlink.io
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "marginBottom": "20px",
-          "width": "600px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c6 microlink_card__content"
-      >
-        <span
-          className="c7"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "marginBottom": "20px",
-          "width": "600px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c11 microlink_card__content"
-      >
-        <span
-          className="c12"
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c13 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "marginBottom": "20px",
-          "width": "600px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c15 microlink_card__content"
-      >
-        <span
-          className="c16"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-  </div>,
-  .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://microlink.io"
-    >
-      https://microlink.io
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "marginBottom": "20px",
-          "width": "700px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c6 microlink_card__content"
-      >
-        <span
-          className="c7"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "marginBottom": "20px",
-          "width": "700px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c11 microlink_card__content"
-      >
-        <span
-          className="c12"
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c13 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "marginBottom": "20px",
-          "width": "700px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c15 microlink_card__content"
-      >
-        <span
-          className="c16"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-  </div>,
-  .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 15px;
-  min-width: 0;
-  box-sizing: border-box;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c4 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
-}
-
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
-}
-
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c10::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
-}
-
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: #e1e8ed;
-  z-index: 1;
-  -webkit-transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  transition: opacity 150ms cubic-bezier(.25,.8,.25,1),visibility 150ms cubic-bezier(.25,.8,.25,1);
-  will-change: opacity;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
-}
-
-.c7 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c12 {
-  opacity: 0.8;
-  height: 16px;
-  width: 75%;
-  display: block;
-  background: #e1e8ed;
-  margin: 0 20px 0 0;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  height: 15px;
-}
-
-.c16 {
-  opacity: 0.8;
-  height: 16px;
-  width: 60%;
-  display: block;
-  background: #e1e8ed;
-  margin: 2px 0 8px;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-}
-
-.c8 {
-  opacity: 0.8;
-  height: 14px;
-  width: 95%;
-  display: block;
-  position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: 0.125s;
-  animation-delay: 0.125s;
-}
-
-.c9 {
-  opacity: 0.8;
-  height: 12px;
-  width: 30%;
-  display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
-  -webkit-animation-delay: .25s;
-  animation-delay: .25s;
-  height: 10px;
-}
-
-.c2 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-}
-
-.c2:active,
-.c2:hover {
-  outline: 0;
-}
-
-.c13 {
-  max-width: var(--microlink-max-width,500px);
-  background-color: var(--microlink-background-color,#fff);
-  border-width: var(--microlink-border-width,1px);
-  border-style: var(--microlink-border-style,solid);
-  border-color: var(--microlink-border-color,#e1e8ed);
-  color: var(--microlink-color,#181919);
-  overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: 1;
-  position: relative;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  transition-timing-function: cubic-bezier(.25,.8,.25,1);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 382px;
-}
-
-.c13:active,
-.c13:hover {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-}
-
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
-}
-
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
-}
-
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
-}
-
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
-}
-
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://microlink.io"
-    >
-      https://microlink.io
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "marginBottom": "20px",
-          "width": "800px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c6 microlink_card__content"
-      >
-        <span
-          className="c7"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c2 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "marginBottom": "20px",
-          "width": "800px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c11 microlink_card__content"
-      >
-        <span
-          className="c12"
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-    <a
-      className="c13 microlink_card c3"
-      direction="ltr"
-      href="https://microlink.io"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "marginBottom": "20px",
-          "width": "800px",
-        }
-      }
-      target="_blank"
-    >
-      <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
-      />
-      <div
-        className="c15 microlink_card__content"
-      >
-        <span
-          className="c16"
-        />
-        <span
-          className="c8"
-        />
-        <span
-          className="c8"
-          style={
-            Object {
-              "marginBottom": "12px",
-            }
-          }
-        />
-        <span
-          className="c9"
-        />
-      </div>
-    </a>
-  </div>,
-]
-`;
diff --git a/packages/react/stories/import.test.js b/packages/react/stories/import.test.js
deleted file mode 100644
index 85b2e3136..000000000
--- a/packages/react/stories/import.test.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/* global test, expect */
-
-import sdk, { getApiUrl, fetchFromApi, imageProxy } from '../dist/microlink.cjs'
-
-test('import sucesfully', () => {
-  expect(typeof sdk).toBe('function')
-  expect(typeof getApiUrl).toBe('function')
-  expect(typeof fetchFromApi).toBe('function')
-  expect(typeof imageProxy).toBe('function')
-})
diff --git a/packages/react/stories/index.js b/packages/react/stories/index.js
deleted file mode 100644
index 45dbd2d7d..000000000
--- a/packages/react/stories/index.js
+++ /dev/null
@@ -1,203 +0,0 @@
-import { storiesOf } from '@storybook/react'
-
-import { urls, urlsVideo, urlsAudio, urlsIframe } from './data'
-import createStoryEntry from './createStoryEntry'
-
-storiesOf('props', module)
-  .add('default', () => urls.map(url => createStoryEntry({ url })))
-  .add('direction', () =>
-    urls.map(url => createStoryEntry({ url, direction: 'rtl' }))
-  )
-  .add('contrast', () =>
-    urls.map(url => createStoryEntry({ url, contrast: true }))
-  )
-  .add('direction + contrast', () =>
-    urls.map(url => createStoryEntry({ url, contrast: true, direction: 'rtl' }))
-  )
-  .add('autoPlay (disabled)', () =>
-    urlsVideo.map(url =>
-      createStoryEntry({ url, media: 'video', autoPlay: false })
-    )
-  )
-  .add('controls (disabled)', () =>
-    urlsVideo.map(url =>
-      createStoryEntry({ url, media: 'video', controls: false })
-    )
-  )
-  .add('loading', () => createStoryEntry({ loading: true }))
-  .add('lazy', () => [
-    createStoryEntry({ lazy: false }, true),
-    createStoryEntry({ lazy: { threshold: 1 } }, true)
-  ])
-  .add('mediaRef', () =>
-    createStoryEntry({
-      url: urlsVideo[0],
-      media: 'video',
-      mediaRef: node => {
-        if (node) {
-          console.log(
-            `
-┌───────────────┐
-│ Microlink SDK │
-└───────────────┘
-  Media Ref:
-`,
-            node
-          )
-        }
-      }
-    })
-  )
-
-storiesOf('media', module)
-  .add('image', () =>
-    urls.map(url => createStoryEntry({ url, media: 'image' }))
-  )
-  .add('logo', () => urls.map(url => createStoryEntry({ url, media: 'logo' })))
-  .add('video', () =>
-    urlsVideo.map(url => createStoryEntry({ url, media: 'video' }))
-  )
-  .add('audio', () =>
-    urlsAudio.map(url => createStoryEntry({ url, media: 'audio' }))
-  )
-  .add('screenshot', () => [
-    createStoryEntry({
-      url: urls[0],
-      media: 'screenshot'
-    })
-  ])
-  .add('iframe', () =>
-    urlsIframe.map(url =>
-      createStoryEntry({
-        url,
-        sizes: ['normal'],
-        media: 'iframe'
-      })
-    )
-  )
-
-storiesOf('setData', module)
-  .add('object', () =>
-    createStoryEntry({
-      setData: {
-        image: {
-          url: 'https://media.tenor.com/images/5d4791abbfa98823cdbcd82b7ece2ced/tenor.gif'
-        },
-        title: 'Microlink Query Language',
-        description: 'Turns any web into data',
-        url: 'https://docs.microlink.io'
-      }
-    })
-  )
-  .add('function', () =>
-    createStoryEntry({
-      setData: () => ({ title: 'My Custom Title' })
-    })
-  )
-  .add('prefer media', () => (
-    <>
-      {createStoryEntry({
-        url: 'https://youtube.com',
-        sizes: ['normal'],
-        media: ['iframe', 'video', 'audio'],
-        setData: data => ({
-          iframe: null,
-          audio: {
-            url: 'https://invalidurl.lol',
-            type: 'mp4',
-            duration: 552.054422,
-            size: 8935291,
-            duration_pretty: '9m',
-            size_pretty: '8.94 MB'
-          },
-          video: {
-            url: 'https://cdn.microlink.io/data/assets/youtube.com!watch!v=9P6rdqiybaw/r3---sn-ab5l6nzl.googlevideo.com!videoplayback!c=WEB&dur=552.054&ei=-fbwXa7LFq2Khwaf6JnoDg&expire=15.mp4',
-            type: 'mp4',
-            duration: 552.007943,
-            size: 54633895,
-            height: 720,
-            width: 1280,
-            duration_pretty: '9m',
-            size_pretty: '54.6 MB'
-          }
-        })
-      })}
-      {createStoryEntry({
-        url: 'https://example.com',
-        sizes: ['normal'],
-        media: ['iframe', 'video', 'audio'],
-        setData: data => ({
-          iframe: {
-            html: "<marquee>welcome to microlink.io! You're the visitor number 12242! CONGRATS!! You win an API key, just send 1$ to hello@microlink.io for receiving it into your inbox</marquee>",
-            scripts: []
-          },
-          audio: {
-            url: 'https://invalidurl.lol',
-            type: 'mp4',
-            duration: 552.054422,
-            size: 8935291,
-            duration_pretty: '9m',
-            size_pretty: '8.94 MB'
-          },
-          video: {
-            url: 'https://cdn.microlink.io/data/assets/youtube.com!watch!v=9P6rdqiybaw/r3---sn-ab5l6nzl.googlevideo.com!videoplayback!c=WEB&dur=552.054&ei=-fbwXa7LFq2Khwaf6JnoDg&expire=15.mp4',
-            type: 'mp4',
-            duration: 552.007943,
-            size: 54633895,
-            height: 720,
-            width: 1280,
-            duration_pretty: '9m',
-            size_pretty: '54.6 MB'
-          }
-        })
-      })}
-    </>
-  ))
-
-storiesOf('style', module)
-  .add('width', () =>
-    ['300px', '400px', '500px', '600px', '700px', '800px'].map((width, index) =>
-      createStoryEntry({
-        url: urls[index],
-        style: {
-          marginBottom: '20px',
-          width
-        }
-      })
-    )
-  )
-  .add('height', () =>
-    ['150px', '175px', '200px', '250px', '300px', '350px'].map(
-      (height, index) =>
-        createStoryEntry({
-          url: urls[index],
-          style: {
-            marginBottom: '20px',
-            height
-          }
-        })
-    )
-  )
-  .add('border radius', () =>
-    ['.42857em', '6px', '10px'].map((borderRadius, index) =>
-      createStoryEntry({
-        url: urls[index],
-        style: {
-          marginBottom: '20px',
-          borderRadius
-        }
-      })
-    )
-  )
-  .add('misc', () =>
-    urls.map(url =>
-      createStoryEntry({
-        url,
-        style: {
-          marginBottom: '20px',
-          fontFamily: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace',
-          boxShadow: '0 1px 4px 0 hsla(0, 0%, 0%, 0.2)'
-        }
-      })
-    )
-  )
diff --git a/packages/react/stories/media.stories.js b/packages/react/stories/media.stories.js
new file mode 100644
index 000000000..aa2e1b275
--- /dev/null
+++ b/packages/react/stories/media.stories.js
@@ -0,0 +1,45 @@
+import { urls, urlsVideo, urlsAudio, urlsIframe } from './util/data'
+import { Story } from './util/story'
+
+export default { title: 'media' }
+
+export const image = {
+  name: 'image',
+  render: () => urls.map(url => Story({ url, media: 'image' }))
+}
+
+export const logo = {
+  name: 'logo',
+  render: () => urls.map(url => Story({ url, media: 'logo' }))
+}
+
+export const video = {
+  name: 'video',
+  render: () => urlsVideo.map(url => Story({ url, media: 'video' }))
+}
+
+export const audio = {
+  name: 'audio',
+  render: () => urlsAudio.map(url => Story({ url, media: 'audio' }))
+}
+
+export const screenshot = {
+  name: 'screenshot',
+  render: () =>
+    Story({
+      url: urls[0],
+      media: 'screenshot'
+    })
+}
+
+export const ifrmae = {
+  name: 'iframe',
+  render: () =>
+    urlsIframe.map(url =>
+      Story({
+        url,
+        sizes: ['normal'],
+        media: 'iframe'
+      })
+    )
+}
diff --git a/packages/react/stories/props.stories.js b/packages/react/stories/props.stories.js
new file mode 100644
index 000000000..080958dae
--- /dev/null
+++ b/packages/react/stories/props.stories.js
@@ -0,0 +1,72 @@
+import { urls, urlsVideo } from './util/data'
+import { Story } from './util/story'
+
+export default { title: 'props' }
+
+export const main = {
+  name: 'default',
+  render: () => urls.map(url => Story({ url }))
+}
+
+export const direction = {
+  name: 'direction',
+  render: () => urls.map(url => Story({ url, direction: 'rtl' }))
+}
+
+export const contrast = {
+  name: 'contrast',
+  render: () => urls.map(url => Story({ url, contrast: true }))
+}
+
+export const directionAndContrast = {
+  name: 'direction + contrast',
+  render: () =>
+    urls.map(url => Story({ url, direction: 'rtl', contrast: true }))
+}
+
+export const autoplayDisabled = {
+  name: 'autoPlay (disabled)',
+  render: () => urls.map(url => Story({ url, media: 'video', autoPlay: false }))
+}
+
+export const constrolsDisabled = {
+  name: 'controls (disabled)',
+  render: () => urls.map(url => Story({ url, media: 'video', controls: false }))
+}
+
+export const loading = {
+  name: 'loading',
+  render: () => Story({ loading: true })
+}
+
+export const lazy = {
+  name: 'lazy',
+  render: () => Story({ lazy: false }, true)
+}
+
+export const lazyTreshold = {
+  name: 'lazy (with threshold)',
+  render: () => Story({ lazy: { threshold: 1 } }, true)
+}
+
+export const mediaRef = {
+  name: 'mediaRef',
+  render: () =>
+    Story({
+      url: urlsVideo[0],
+      media: 'video',
+      mediaRef: node => {
+        if (node) {
+          console.log(
+            `
+┌───────────────┐
+│ Microlink SDK │
+└───────────────┘
+Media Ref:
+`,
+            node
+          )
+        }
+      }
+    })
+}
diff --git a/packages/react/stories/require.test.js b/packages/react/stories/require.test.js
deleted file mode 100644
index 07e722594..000000000
--- a/packages/react/stories/require.test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/* global test, expect */
-
-'use strict'
-
-test('require resolve sucesfully', () => {
-  const sdk = require('..')
-  expect(typeof sdk.fetchFromApi).toBe('function')
-  expect(typeof sdk.getApiUrl).toBe('function')
-  expect(typeof sdk.imageProxy).toBe('function')
-  expect(typeof sdk.default).toBe('function')
-})
diff --git a/packages/react/stories/set-data.stories.js b/packages/react/stories/set-data.stories.js
new file mode 100644
index 000000000..caa4939fb
--- /dev/null
+++ b/packages/react/stories/set-data.stories.js
@@ -0,0 +1,89 @@
+import { Story } from './util/story'
+
+export default { title: 'setData' }
+
+export const object = {
+  name: 'object',
+  render: () =>
+    Story({
+      setData: {
+        image: {
+          url: 'https://media.tenor.com/images/5d4791abbfa98823cdbcd82b7ece2ced/tenor.gif'
+        },
+        title: 'Microlink Query Language',
+        description: 'Turns any web into data',
+        url: 'https://docs.microlink.io'
+      }
+    })
+}
+
+export const _function = {
+  name: 'function',
+  render: () =>
+    Story({
+      setData: () => ({ title: 'My Custom Title' })
+    })
+}
+
+export const preferMedia = {
+  name: 'prefer media',
+  render: () => (
+    <>
+      {Story({
+        url: 'https://youtube.com',
+        sizes: ['normal'],
+        media: ['iframe', 'video', 'audio'],
+        setData: data => ({
+          iframe: null,
+          audio: {
+            url: 'https://invalidurl.lol',
+            type: 'mp4',
+            duration: 552.054422,
+            size: 8935291,
+            duration_pretty: '9m',
+            size_pretty: '8.94 MB'
+          },
+          video: {
+            url: 'https://cdn.microlink.io/data/assets/youtube.com!watch!v=9P6rdqiybaw/r3---sn-ab5l6nzl.googlevideo.com!videoplayback!c=WEB&dur=552.054&ei=-fbwXa7LFq2Khwaf6JnoDg&expire=15.mp4',
+            type: 'mp4',
+            duration: 552.007943,
+            size: 54633895,
+            height: 720,
+            width: 1280,
+            duration_pretty: '9m',
+            size_pretty: '54.6 MB'
+          }
+        })
+      })}
+      {Story({
+        url: 'https://example.com',
+        sizes: ['normal'],
+        media: ['iframe', 'video', 'audio'],
+        setData: data => ({
+          iframe: {
+            html: "<marquee>welcome to microlink.io! You're the visitor number 12242! CONGRATS!! You win an API key, just send 1$ to hello@microlink.io for receiving it into your inbox</marquee>",
+            scripts: []
+          },
+          audio: {
+            url: 'https://invalidurl.lol',
+            type: 'mp4',
+            duration: 552.054422,
+            size: 8935291,
+            duration_pretty: '9m',
+            size_pretty: '8.94 MB'
+          },
+          video: {
+            url: 'https://cdn.microlink.io/data/assets/youtube.com!watch!v=9P6rdqiybaw/r3---sn-ab5l6nzl.googlevideo.com!videoplayback!c=WEB&dur=552.054&ei=-fbwXa7LFq2Khwaf6JnoDg&expire=15.mp4',
+            type: 'mp4',
+            duration: 552.007943,
+            size: 54633895,
+            height: 720,
+            width: 1280,
+            duration_pretty: '9m',
+            size_pretty: '54.6 MB'
+          }
+        })
+      })}
+    </>
+  )
+}
diff --git a/packages/react/stories/style.stories.js b/packages/react/stories/style.stories.js
new file mode 100644
index 000000000..b0333d9fc
--- /dev/null
+++ b/packages/react/stories/style.stories.js
@@ -0,0 +1,62 @@
+import { urls } from './util/data'
+import { Story } from './util/story'
+
+export default { title: 'style' }
+
+export const width = {
+  name: 'width',
+  render: () =>
+    ['300px', '400px', '500px', '600px', '700px', '800px'].map((width, index) =>
+      Story({
+        url: urls[index],
+        style: {
+          marginBottom: '20px',
+          width
+        }
+      })
+    )
+}
+
+export const height = {
+  name: 'height',
+  render: () =>
+    ['150px', '175px', '200px', '250px', '300px', '350px'].map(
+      (height, index) =>
+        Story({
+          url: urls[index],
+          style: {
+            marginBottom: '20px',
+            height
+          }
+        })
+    )
+}
+
+export const borderRadius = {
+  name: 'border-radius',
+  render: () =>
+    ['.42857em', '6px', '10px'].map((borderRadius, index) =>
+      Story({
+        url: urls[index],
+        style: {
+          marginBottom: '20px',
+          borderRadius
+        }
+      })
+    )
+}
+
+export const misc = {
+  name: 'misc',
+  render: () =>
+    urls.map(url =>
+      Story({
+        url,
+        style: {
+          marginBottom: '20px',
+          fontFamily: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace',
+          boxShadow: '0 1px 4px 0 hsla(0, 0%, 0%, 0.2)'
+        }
+      })
+    )
+}
diff --git a/packages/react/stories/data.js b/packages/react/stories/util/data.js
similarity index 100%
rename from packages/react/stories/data.js
rename to packages/react/stories/util/data.js
diff --git a/packages/react/stories/createStoryEntry.js b/packages/react/stories/util/story.js
similarity index 91%
rename from packages/react/stories/createStoryEntry.js
rename to packages/react/stories/util/story.js
index 996ae9fb9..486f9ec56 100644
--- a/packages/react/stories/createStoryEntry.js
+++ b/packages/react/stories/util/story.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import Microlink from '../src'
+import Microlink from '../../src'
 
 const StoryEntry = styled('div')`
   display: flex;
@@ -46,7 +46,7 @@ const VisualProps = ({ children }) => (
   </div>
 )
 
-const createStoryEntry = (storyProps = {}, showProps = false) => {
+export const Story = (storyProps = {}, showProps = false) => {
   const {
     url = 'https://microlink.io',
     sizes = ['normal', 'small', 'large'],
@@ -65,5 +65,3 @@ const createStoryEntry = (storyProps = {}, showProps = false) => {
     </StoryEntry>
   )
 }
-
-export default createStoryEntry

From 20d944e58a12b187a2bcf11c50fe659258acfdd2 Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Thu, 30 Nov 2023 22:20:29 +0100
Subject: [PATCH 3/7] build: remove jest

---
 packages/react/package.json | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index e6076dd17..619b577ed 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -52,12 +52,6 @@
     "@storybook/test": "7",
     "babel-plugin-transform-react-pure-class-to-function": "latest",
     "babel-plugin-transform-react-remove-prop-types": "latest",
-    "enzyme": "latest",
-    "enzyme-adapter-react-16": "latest",
-    "jest": "26",
-    "jest-environment-enzyme": "latest",
-    "jest-enzyme": "latest",
-    "jest-styled-components": "latest",
     "lodash": "latest",
     "prop-types": "latest",
     "react": "^17",
@@ -79,18 +73,9 @@
     "build-storybook": "storybook build",
     "pretest": "npm run build",
     "start": "node scripts/start.js",
-    "storybook": "storybook dev -p 6006",
-    "test": "NODE_ENV=test jest --detectOpenHandles"
+    "storybook": "storybook dev -p 6006"
   },
   "license": "MIT",
-  "jest": {
-    "setupFilesAfterEnv": [
-      "jest-enzyme"
-    ],
-    "testEnvironment": "enzyme",
-    "testURL": "http://localhost/",
-    "verbose": true
-  },
   "peerDependencies": {
     "react": ">= 17",
     "react-dom": ">= 17",

From f1a8785fba5b2d8bb901637c931c3ecb205c254a Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Thu, 30 Nov 2023 22:29:31 +0100
Subject: [PATCH 4/7] build: add vitest

---
 packages/react/package.json    |  6 ++++--
 packages/react/test/import.js  | 10 ++++++++++
 packages/react/test/require.js |  9 +++++++++
 packages/react/vite.config.js  |  7 +++++++
 4 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 packages/react/test/import.js
 create mode 100644 packages/react/test/require.js
 create mode 100644 packages/react/vite.config.js

diff --git a/packages/react/package.json b/packages/react/package.json
index 619b577ed..d0895f34f 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -60,7 +60,8 @@
     "rollup-plugin-filesize": "latest",
     "rollup-plugin-visualizer": "latest",
     "storybook": "7",
-    "styled-components": "latest"
+    "styled-components": "latest",
+    "vitest": "latest"
   },
   "engines": {
     "node": ">= 10"
@@ -73,7 +74,8 @@
     "build-storybook": "storybook build",
     "pretest": "npm run build",
     "start": "node scripts/start.js",
-    "storybook": "storybook dev -p 6006"
+    "storybook": "storybook dev -p 6006",
+    "test": "vitest"
   },
   "license": "MIT",
   "peerDependencies": {
diff --git a/packages/react/test/import.js b/packages/react/test/import.js
new file mode 100644
index 000000000..2e87f4fef
--- /dev/null
+++ b/packages/react/test/import.js
@@ -0,0 +1,10 @@
+import { expect, test } from 'vitest'
+
+import sdk, { getApiUrl, fetchFromApi, imageProxy } from '../dist/microlink.cjs'
+
+test('import', () => {
+  expect(typeof sdk).toBe('function')
+  expect(typeof getApiUrl).toBe('function')
+  expect(typeof fetchFromApi).toBe('function')
+  expect(typeof imageProxy).toBe('function')
+})
diff --git a/packages/react/test/require.js b/packages/react/test/require.js
new file mode 100644
index 000000000..af1d9fdf6
--- /dev/null
+++ b/packages/react/test/require.js
@@ -0,0 +1,9 @@
+import { expect, test } from 'vitest'
+
+test('require', () => {
+  const sdk = require('..')
+  expect(typeof sdk.fetchFromApi).toBe('function')
+  expect(typeof sdk.getApiUrl).toBe('function')
+  expect(typeof sdk.imageProxy).toBe('function')
+  expect(typeof sdk.default).toBe('function')
+})
diff --git a/packages/react/vite.config.js b/packages/react/vite.config.js
new file mode 100644
index 000000000..9be1fc827
--- /dev/null
+++ b/packages/react/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    include: ['test/**/*.js']
+  }
+})

From 37f02e9b9b96e791eb5fb81571a76efafc07e979 Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Sat, 2 Dec 2023 16:57:34 +0000
Subject: [PATCH 5/7] refactor: prefer named exports

---
 .../react/src/components/Card/CardContent.js  | 10 ++++-----
 .../react/src/components/Card/CardEmpty.js    |  2 +-
 .../Card/CardMedia/Controls/FooterControls.js | 11 +++++-----
 .../Card/CardMedia/Controls/MediaButton.js    |  2 +-
 .../Card/CardMedia/Controls/PlaybackButton.js | 13 ++++++------
 .../Controls/ProgressBar/Scrubber.js          |  2 +-
 .../CardMedia/Controls/ProgressBar/Tooltip.js |  2 +-
 .../CardMedia/Controls/ProgressBar/index.js   | 18 ++++++++--------
 .../Card/CardMedia/Controls/SeekButton.js     |  2 +-
 .../Card/CardMedia/Controls/Spinner.js        |  2 +-
 .../Card/CardMedia/Controls/index.js          | 21 ++++++++++---------
 .../src/components/Card/CardMedia/Image.js    |  2 +-
 .../src/components/Card/CardMedia/Video.js    |  2 +-
 .../src/components/Card/CardMedia/Wrap.js     |  2 +-
 .../src/components/Card/CardMedia/loader.js   |  6 +++---
 .../react/src/components/Card/CardText.js     |  2 +-
 .../react/src/components/Card/CardWrap.js     |  4 ++--
 packages/react/stories/util/story.js          |  2 +-
 18 files changed, 54 insertions(+), 51 deletions(-)

diff --git a/packages/react/src/components/Card/CardContent.js b/packages/react/src/components/Card/CardContent.js
index 2b1e1399c..ffc554c92 100644
--- a/packages/react/src/components/Card/CardContent.js
+++ b/packages/react/src/components/Card/CardContent.js
@@ -1,7 +1,7 @@
 /* global URL */
 
 import React, { useCallback, useMemo, useContext } from 'react'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 import CardText from './CardText'
 
 import { transition } from '../../theme'
@@ -51,10 +51,10 @@ const Header = styled('header').attrs({ className: classNames.title })`
     font-size: ${!isSmall(cardSize) ? '16px' : '15px'};
 
     ${isSmall(cardSize) &&
-      css`
-        min-width: 0;
-        padding-right: 14px;
-      `}
+    css`
+      min-width: 0;
+      padding-right: 14px;
+    `}
   `}
 `
 
diff --git a/packages/react/src/components/Card/CardEmpty.js b/packages/react/src/components/Card/CardEmpty.js
index c2c246bcc..43ee9cf53 100644
--- a/packages/react/src/components/Card/CardEmpty.js
+++ b/packages/react/src/components/Card/CardEmpty.js
@@ -1,7 +1,7 @@
 /* eslint-disable multiline-ternary */
 
 import React, { useContext } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { emptyStateAnimation, emptyStateImageAnimation } from './CardAnimation'
 import CardImage from './CardMedia/Image'
diff --git a/packages/react/src/components/Card/CardMedia/Controls/FooterControls.js b/packages/react/src/components/Card/CardMedia/Controls/FooterControls.js
index 844528161..19246ba51 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/FooterControls.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/FooterControls.js
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import MediaButton from './MediaButton'
 import { classNames, media, isLarge } from '../../../../utils'
@@ -56,7 +56,7 @@ const VolumeButton = styled(MediaButton).attrs({
     height: ${({ cardSize }) => (isLarge(cardSize) ? 16 : 14)}px;
 
     ${({ cardSize }) =>
-    !isLarge(cardSize) &&
+      !isLarge(cardSize) &&
       media.mobile`
       width: 12px;
       height: 12px;
@@ -105,9 +105,10 @@ const FooterControls = ({
   onPlaybackRateClick,
   playbackRate
 }) => {
-  const VolumeComponent = useMemo(() => (isMuted ? VolumeMute : VolumeUp), [
-    isMuted
-  ])
+  const VolumeComponent = useMemo(
+    () => (isMuted ? VolumeMute : VolumeUp),
+    [isMuted]
+  )
   const isLargeCard = useMemo(() => isLarge(cardSize), [cardSize])
 
   return (
diff --git a/packages/react/src/components/Card/CardMedia/Controls/MediaButton.js b/packages/react/src/components/Card/CardMedia/Controls/MediaButton.js
index d3ef2866e..95236286e 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/MediaButton.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/MediaButton.js
@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 import { transition } from '../../../../theme'
 
 const MediaButton = styled('div')`
diff --git a/packages/react/src/components/Card/CardMedia/Controls/PlaybackButton.js b/packages/react/src/components/Card/CardMedia/Controls/PlaybackButton.js
index 4cfd0dca7..dd3b40d62 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/PlaybackButton.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/PlaybackButton.js
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 
 import MediaButton from './MediaButton'
 import { classNames, isSmall, isLarge, media } from '../../../../utils'
@@ -50,8 +50,8 @@ const PlaybackButtonWrap = styled(MediaButton).attrs({
       padding: ${isLarge(cardSize) ? 0 : '8px'};
 
       ${!isLarge(cardSize) &&
-        !isSmall(cardSize) &&
-        media.mobile`
+      !isSmall(cardSize) &&
+      media.mobile`
         width: calc(${iconSizes.small} * 1.2);
         height: calc(${iconSizes.small} * 1.2);
       `}
@@ -60,9 +60,10 @@ const PlaybackButtonWrap = styled(MediaButton).attrs({
 `
 
 const PlaybackButton = ({ isPlaying, ...props }) => {
-  const PlaybackComponent = useMemo(() => (isPlaying ? Pause : Play), [
-    isPlaying
-  ])
+  const PlaybackComponent = useMemo(
+    () => (isPlaying ? Pause : Play),
+    [isPlaying]
+  )
 
   return (
     <PlaybackButtonWrap title={isPlaying ? 'Pause' : 'Play'} {...props}>
diff --git a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Scrubber.js b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Scrubber.js
index d7ebe30b5..e76969487 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Scrubber.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Scrubber.js
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 
 import { transition } from '../../../../../theme'
 
diff --git a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Tooltip.js b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Tooltip.js
index 4539b6c72..32e00261e 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Tooltip.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Tooltip.js
@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { font, transition } from '../../../../../theme'
 
diff --git a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/index.js b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/index.js
index 56c72f64e..e11b19253 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/index.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/index.js
@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useMemo, useRef } from 'react'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 
 import { transition } from '../../../../../theme'
 import {
@@ -153,10 +153,10 @@ const ProgressBar = ({
     return 0
   }, [])
 
-  const progressRatio = useMemo(() => clampNumber(progress / duration, 0, 1), [
-    duration,
-    progress
-  ])
+  const progressRatio = useMemo(
+    () => clampNumber(progress / duration, 0, 1),
+    [duration, progress]
+  )
 
   const progressPercent = useMemo(
     () => `${clampNumber(progressRatio * 100, 1, 99)}%`,
@@ -212,10 +212,10 @@ const ProgressBar = ({
     [onClick, onMouseDown, onMouseOver]
   )
 
-  const showAccessories = useMemo(() => isDragging || isHovering, [
-    isDragging,
-    isHovering
-  ])
+  const showAccessories = useMemo(
+    () => isDragging || isHovering,
+    [isDragging, isHovering]
+  )
 
   return (
     <OuterWrap cardSize={size} ref={wrapRef} {...mouseEvents}>
diff --git a/packages/react/src/components/Card/CardMedia/Controls/SeekButton.js b/packages/react/src/components/Card/CardMedia/Controls/SeekButton.js
index e70922a65..65101f141 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/SeekButton.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/SeekButton.js
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import MediaButton from './MediaButton'
 import { media, isLarge } from '../../../../utils'
diff --git a/packages/react/src/components/Card/CardMedia/Controls/Spinner.js b/packages/react/src/components/Card/CardMedia/Controls/Spinner.js
index 4fad0761a..02f6b9f6e 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/Spinner.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/Spinner.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import styled, { css, keyframes } from 'styled-components'
+import { styled, css, keyframes } from 'styled-components'
 
 import { transition } from '../../../../theme'
 import { classNames } from '../../../../utils'
diff --git a/packages/react/src/components/Card/CardMedia/Controls/index.js b/packages/react/src/components/Card/CardMedia/Controls/index.js
index e6a78de3e..d19943cc8 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/index.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/index.js
@@ -9,7 +9,7 @@ import React, {
   useState
 } from 'react'
 
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 
 import FooterControls from './FooterControls'
 import PlaybackButton from './PlaybackButton'
@@ -81,12 +81,12 @@ const ControlsTop = styled('div')`
   ${({ isVisible }) =>
     !isVisible &&
     css`
-    *[class*="${classNames.mediaControls}"]:not(.${classNames.progressTime}) {
-      transition: ${transition.medium('opacity', 'visibility')};
-      opacity: 0;
-      visibility: hidden;
-    }
-  `}
+      *[class*='${classNames.mediaControls}']:not(.${classNames.progressTime}) {
+        transition: ${transition.medium('opacity', 'visibility')};
+        opacity: 0;
+        visibility: hidden;
+      }
+    `}
 `
 
 const getNextPlaybackRate = rate => {
@@ -336,9 +336,10 @@ const Controls = ({ MediaComponent, mediaProps }) => {
     [onWrapClick, onWrapKeyDown, onWrapMouseMove, onWrapMouseOver]
   )
 
-  const outerWrapTitle = useMemo(() => (hasInteracted ? { title: '' } : {}), [
-    hasInteracted
-  ])
+  const outerWrapTitle = useMemo(
+    () => (hasInteracted ? { title: '' } : {}),
+    [hasInteracted]
+  )
 
   const bufferedMedia = useMemo(() => {
     if (buffered && buffered.length && mediaRef.current) {
diff --git a/packages/react/src/components/Card/CardMedia/Image.js b/packages/react/src/components/Card/CardMedia/Image.js
index f01bce482..4cbd9b519 100644
--- a/packages/react/src/components/Card/CardMedia/Image.js
+++ b/packages/react/src/components/Card/CardMedia/Image.js
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import Wrap from './Wrap'
 import { GlobalContext } from '../../../context/GlobalState'
diff --git a/packages/react/src/components/Card/CardMedia/Video.js b/packages/react/src/components/Card/CardMedia/Video.js
index 8e653f594..a1b214002 100644
--- a/packages/react/src/components/Card/CardMedia/Video.js
+++ b/packages/react/src/components/Card/CardMedia/Video.js
@@ -1,5 +1,5 @@
 import React, { useContext, useMemo } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import Wrap from './Wrap'
 import Controls from './Controls'
diff --git a/packages/react/src/components/Card/CardMedia/Wrap.js b/packages/react/src/components/Card/CardMedia/Wrap.js
index 61f8af670..1865efb11 100644
--- a/packages/react/src/components/Card/CardMedia/Wrap.js
+++ b/packages/react/src/components/Card/CardMedia/Wrap.js
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 
 import { GlobalContext } from '../../../context/GlobalState'
 import { media } from '../../../utils'
diff --git a/packages/react/src/components/Card/CardMedia/loader.js b/packages/react/src/components/Card/CardMedia/loader.js
index 722017f6c..ff229d934 100644
--- a/packages/react/src/components/Card/CardMedia/loader.js
+++ b/packages/react/src/components/Card/CardMedia/loader.js
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 import { transition } from '../../../theme'
 
 export const ImageLoadCatcher = styled('img')`
@@ -22,8 +22,8 @@ export const loadingOverlay = css`
     will-change: opacity;
 
     ${({ isLoading }) => css`
-      opacity: ${(isLoading ? 1 : 0)};
-      visibility: ${(isLoading ? 'visible' : 'hidden')};
+      opacity: ${isLoading ? 1 : 0};
+      visibility: ${isLoading ? 'visible' : 'hidden'};
     `};
   }
 `
diff --git a/packages/react/src/components/Card/CardText.js b/packages/react/src/components/Card/CardText.js
index ce3e0f5c5..11612bffc 100644
--- a/packages/react/src/components/Card/CardText.js
+++ b/packages/react/src/components/Card/CardText.js
@@ -1,7 +1,7 @@
 /* eslint-disable multiline-ternary */
 
 import React from 'react'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 import NanoClamp from 'nanoclamp'
 
 import { isNil } from '../../utils'
diff --git a/packages/react/src/components/Card/CardWrap.js b/packages/react/src/components/Card/CardWrap.js
index f5b32012b..5be253bfc 100644
--- a/packages/react/src/components/Card/CardWrap.js
+++ b/packages/react/src/components/Card/CardWrap.js
@@ -1,5 +1,5 @@
 import { createElement, forwardRef, useContext } from 'react'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 
 import { GlobalContext } from '../../context/GlobalState'
 import { font, animation, speed } from '../../theme'
@@ -35,7 +35,7 @@ const hoverStyle = css`
   will-change: background, border-color;
   &:hover {
     background-color: var(--microlink-hover-background-color, #f5f8fa);
-    border-color: var(--microlink-hover-border-color, #8899A680);
+    border-color: var(--microlink-hover-border-color, #8899a680);
   }
 `
 
diff --git a/packages/react/stories/util/story.js b/packages/react/stories/util/story.js
index 486f9ec56..25e5362c8 100644
--- a/packages/react/stories/util/story.js
+++ b/packages/react/stories/util/story.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import Microlink from '../../src'
 

From 982b7e5d9968cc60679fc5b967ade88df64ab86c Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Sat, 2 Dec 2023 16:58:37 +0000
Subject: [PATCH 6/7] refactor: use ava for testing

---
 packages/react/package.json                  |  13 +++--
 packages/react/test/build.mjs                |  13 +++++
 packages/react/test/import.js                |  10 ----
 packages/react/test/require.js               |   9 ---
 packages/react/test/snapshots/build.mjs.md   |  57 +++++++++++++++++++
 packages/react/test/snapshots/build.mjs.snap | Bin 0 -> 394 bytes
 packages/react/vite.config.js                |   7 ---
 7 files changed, 77 insertions(+), 32 deletions(-)
 create mode 100644 packages/react/test/build.mjs
 delete mode 100644 packages/react/test/import.js
 delete mode 100644 packages/react/test/require.js
 create mode 100644 packages/react/test/snapshots/build.mjs.md
 create mode 100644 packages/react/test/snapshots/build.mjs.snap
 delete mode 100644 packages/react/vite.config.js

diff --git a/packages/react/package.json b/packages/react/package.json
index d0895f34f..9ce71b23a 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -50,18 +50,19 @@
     "@storybook/react": "7",
     "@storybook/react-webpack5": "7",
     "@storybook/test": "7",
+    "ava": "latest",
     "babel-plugin-transform-react-pure-class-to-function": "latest",
     "babel-plugin-transform-react-remove-prop-types": "latest",
+    "execa": "latest",
     "lodash": "latest",
     "prop-types": "latest",
-    "react": "^17",
-    "react-dom": "^17",
+    "react": "18",
+    "react-dom": "18",
     "rollup": "latest",
     "rollup-plugin-filesize": "latest",
     "rollup-plugin-visualizer": "latest",
     "storybook": "7",
-    "styled-components": "latest",
-    "vitest": "latest"
+    "styled-components": "latest"
   },
   "engines": {
     "node": ">= 10"
@@ -75,13 +76,13 @@
     "pretest": "npm run build",
     "start": "node scripts/start.js",
     "storybook": "storybook dev -p 6006",
-    "test": "vitest"
+    "test": "ava"
   },
   "license": "MIT",
   "peerDependencies": {
     "react": ">= 17",
     "react-dom": ">= 17",
-    "styled-components": "^5"
+    "styled-components": " >= 5"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/react/test/build.mjs b/packages/react/test/build.mjs
new file mode 100644
index 000000000..f6b4dcb29
--- /dev/null
+++ b/packages/react/test/build.mjs
@@ -0,0 +1,13 @@
+import { $ } from 'execa'
+import test from 'ava'
+
+const evalScript = code => $`node --eval ${code}`.then(({ stdout }) => stdout)
+evalScript.esm = code => $`node --input-type module --eval ${code}`.then(({ stdout }) => stdout)
+
+test('cjs', async t => {
+  t.snapshot((await evalScript("console.log(require('./dist/microlink.cjs'))")))
+})
+
+test('esm', async t => {
+  t.snapshot((await evalScript.esm('console.log(await import("./dist/microlink.mjs"))')))
+})
diff --git a/packages/react/test/import.js b/packages/react/test/import.js
deleted file mode 100644
index 2e87f4fef..000000000
--- a/packages/react/test/import.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { expect, test } from 'vitest'
-
-import sdk, { getApiUrl, fetchFromApi, imageProxy } from '../dist/microlink.cjs'
-
-test('import', () => {
-  expect(typeof sdk).toBe('function')
-  expect(typeof getApiUrl).toBe('function')
-  expect(typeof fetchFromApi).toBe('function')
-  expect(typeof imageProxy).toBe('function')
-})
diff --git a/packages/react/test/require.js b/packages/react/test/require.js
deleted file mode 100644
index af1d9fdf6..000000000
--- a/packages/react/test/require.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { expect, test } from 'vitest'
-
-test('require', () => {
-  const sdk = require('..')
-  expect(typeof sdk.fetchFromApi).toBe('function')
-  expect(typeof sdk.getApiUrl).toBe('function')
-  expect(typeof sdk.imageProxy).toBe('function')
-  expect(typeof sdk.default).toBe('function')
-})
diff --git a/packages/react/test/snapshots/build.mjs.md b/packages/react/test/snapshots/build.mjs.md
new file mode 100644
index 000000000..81df2b1cd
--- /dev/null
+++ b/packages/react/test/snapshots/build.mjs.md
@@ -0,0 +1,57 @@
+# Snapshot report for `test/build.mjs`
+
+The actual snapshot is saved in `build.mjs.snap`.
+
+Generated by [AVA](https://avajs.dev).
+
+## cjs
+
+> Snapshot 1
+
+    `{␊
+      fetchFromApi: [Getter],␊
+      default: [Function: Microlink] {␊
+        defaultProps: {␊
+          className: '',␊
+          apiKey: undefined,␊
+          autoPlay: true,␊
+          controls: true,␊
+          direction: 'ltr',␊
+          lazy: true,␊
+          loop: true,␊
+          media: [Array],␊
+          fetchData: true,␊
+          muted: true,␊
+          playsInline: true,␊
+          size: 'normal'␊
+        }␊
+      },␊
+      getApiUrl: [Function: getApiUrl],␊
+      imageProxy: [Function: imageProxy]␊
+    }`
+
+## esm
+
+> Snapshot 1
+
+    `[Module: null prototype] {␊
+      default: [Function: Microlink] {␊
+        defaultProps: {␊
+          className: '',␊
+          apiKey: undefined,␊
+          autoPlay: true,␊
+          controls: true,␊
+          direction: 'ltr',␊
+          lazy: true,␊
+          loop: true,␊
+          media: [Array],␊
+          fetchData: true,␊
+          muted: true,␊
+          playsInline: true,␊
+          size: 'normal'␊
+        }␊
+      },␊
+      fetchFromApi: [AsyncFunction: u],␊
+      getApiUrl: [Function: getApiUrl],␊
+      imageProxy: [Function: imageProxy]␊
+    }`
diff --git a/packages/react/test/snapshots/build.mjs.snap b/packages/react/test/snapshots/build.mjs.snap
new file mode 100644
index 0000000000000000000000000000000000000000..0a1cd35b07aa51286685100f4fff81825d9e23d8
GIT binary patch
literal 394
zcmV;50d@XCRzV<BZeeh9Xm4~Nb~6eC0K-Sj;j4?n!E24r+h!&rQ7}s>`@1E9F7Q%x
zC1Yhkoga$`00000000B+lRZuYF%U+xAcV9XH<)gloWR{m2!v2j8Va=9!q}6<WY)Iq
zvBU<YfSZJx8*m72z**3S{AeS}l(>8|V~xKjuO^S=)I7euBO4}E>M5FNrH?bm@pYxO
zWciSNo(|3j-O0`d7bhRtOAatWR<o<%n$jBq)ip9>sE0X##)(YC0;;QI6&q&-jEoA7
zjGfoe4ey%9!TBgQ3_y{L@lG}<peTkLD80GGRzR{EC&r@Q6%xBK$yNY|gj=ed<=`mx
zsWt&OyA;G>cR9($!8|$V`=mi_q=2dnLALdlt^>G~EDxF!qwXV5vW+*EjKzK-nnm|g
z>p~-`Si@xwu<Ytn<kFk_K)oDybiIaY<P^ujJ-5B4J+AZR)-1;653}DrvtL;?ayk(T
ou!#tKaO}AC_-pN7>@mb1e4H}2R_*gl^)coD0M>OEwcrB)0P5Ph;Q#;t

literal 0
HcmV?d00001

diff --git a/packages/react/vite.config.js b/packages/react/vite.config.js
deleted file mode 100644
index 9be1fc827..000000000
--- a/packages/react/vite.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineConfig } from 'vitest/config'
-
-export default defineConfig({
-  test: {
-    include: ['test/**/*.js']
-  }
-})

From 4db8558e0241bb67936d3a04e2159171a8bdd850 Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Sat, 2 Dec 2023 17:44:34 +0000
Subject: [PATCH 7/7] refactor: tweaks

---
 packages/react/.storybook/main.js          | 3 ---
 packages/react/package.json                | 1 -
 packages/react/stories/set-data.stories.js | 7 +++++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
index f04778160..e1772cf51 100644
--- a/packages/react/.storybook/main.js
+++ b/packages/react/.storybook/main.js
@@ -16,9 +16,6 @@ const config = {
         useSWC: true
       }
     }
-  },
-  docs: {
-    autodocs: 'tag'
   }
 }
 export default config
diff --git a/packages/react/package.json b/packages/react/package.json
index 9ce71b23a..3104de9b9 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -74,7 +74,6 @@
     "build": "NODE_ENV=production rollup -c rollup.config.js --bundleConfigAsCjs",
     "build-storybook": "storybook build",
     "pretest": "npm run build",
-    "start": "node scripts/start.js",
     "storybook": "storybook dev -p 6006",
     "test": "ava"
   },
diff --git a/packages/react/stories/set-data.stories.js b/packages/react/stories/set-data.stories.js
index caa4939fb..cb998a0c7 100644
--- a/packages/react/stories/set-data.stories.js
+++ b/packages/react/stories/set-data.stories.js
@@ -1,3 +1,4 @@
+import React from 'react'
 import { Story } from './util/story'
 
 export default { title: 'setData' }
@@ -33,7 +34,8 @@ export const preferMedia = {
         url: 'https://youtube.com',
         sizes: ['normal'],
         media: ['iframe', 'video', 'audio'],
-        setData: data => ({
+        fetchData: false,
+        setData: () => ({
           iframe: null,
           audio: {
             url: 'https://invalidurl.lol',
@@ -59,7 +61,8 @@ export const preferMedia = {
         url: 'https://example.com',
         sizes: ['normal'],
         media: ['iframe', 'video', 'audio'],
-        setData: data => ({
+        fetchData: false,
+        setData: () => ({
           iframe: {
             html: "<marquee>welcome to microlink.io! You're the visitor number 12242! CONGRATS!! You win an API key, just send 1$ to hello@microlink.io for receiving it into your inbox</marquee>",
             scripts: []