From 1ed3460fb07383bf5918dd6abfffab6b8af261f1 Mon Sep 17 00:00:00 2001
From: Brad Adams <hi@breadadams.com>
Date: Wed, 10 May 2023 02:14:22 +0200
Subject: [PATCH 1/3] feat: initial `@emotion` migration

---
 packages/react/.babelrc                       |     3 +-
 packages/react/package.json                   |    10 +-
 packages/react/rollup.config.js               |     4 +-
 .../src/components/Card/CardAnimation.js      |     2 +-
 .../react/src/components/Card/CardContent.js  |    25 +-
 .../react/src/components/Card/CardEmpty.js    |     2 +-
 .../Card/CardMedia/Controls/FooterControls.js |    20 +-
 .../Card/CardMedia/Controls/MediaButton.js    |     2 +-
 .../Card/CardMedia/Controls/PlaybackButton.js |     9 +-
 .../Controls/ProgressBar/Scrubber.js          |    26 +-
 .../CardMedia/Controls/ProgressBar/Tooltip.js |    24 +-
 .../CardMedia/Controls/ProgressBar/index.js   |    78 +-
 .../Card/CardMedia/Controls/SeekButton.js     |     2 +-
 .../Card/CardMedia/Controls/Spinner.js        |    17 +-
 .../Card/CardMedia/Controls/index.js          |     9 +-
 .../src/components/Card/CardMedia/Image.js    |     8 +-
 .../src/components/Card/CardMedia/Video.js    |     2 +-
 .../src/components/Card/CardMedia/Wrap.js     |    10 +-
 .../src/components/Card/CardMedia/loader.js   |    13 +-
 .../react/src/components/Card/CardText.js     |     3 +-
 .../react/src/components/Card/CardWrap.js     |    34 +-
 packages/react/src/utils/index.js             |     2 +-
 .../stories/__snapshots__/index.test.js.snap  | 19465 +++++++++-------
 packages/react/stories/createStoryEntry.js    |     2 +-
 packages/react/stories/index.test.js          |     5 +-
 25 files changed, 11392 insertions(+), 8385 deletions(-)

diff --git a/packages/react/.babelrc b/packages/react/.babelrc
index bc21ecb9c..5550e1a23 100644
--- a/packages/react/.babelrc
+++ b/packages/react/.babelrc
@@ -16,7 +16,8 @@
   ],
   "plugins": [
     "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-object-rest-spread"
+    "@babel/plugin-proposal-object-rest-spread",
+    "@emotion"
   ],
   "env": {
     "production": {
diff --git a/packages/react/package.json b/packages/react/package.json
index cfa630ab8..cf0f1d8af 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -37,6 +37,9 @@
     "@babel/preset-env": "latest",
     "@babel/preset-react": "latest",
     "@babel/runtime": "latest",
+    "@emotion/jest": "latest",
+    "@emotion/react": "latest",
+    "@emotion/styled": "latest",
     "@microlink/demo-links": "latest",
     "@rollup/plugin-babel": "latest",
     "@rollup/plugin-commonjs": "latest",
@@ -56,7 +59,6 @@
     "jest": "26",
     "jest-environment-enzyme": "latest",
     "jest-enzyme": "latest",
-    "jest-styled-components": "latest",
     "lodash": "latest",
     "prop-types": "latest",
     "react": "^17",
@@ -64,7 +66,6 @@
     "rollup": "latest",
     "rollup-plugin-filesize": "latest",
     "rollup-plugin-visualizer": "latest",
-    "styled-components": "latest",
     "unfetch": "latest"
   },
   "engines": {
@@ -91,9 +92,10 @@
     "verbose": true
   },
   "peerDependencies": {
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
     "react": ">= 17",
-    "react-dom": ">= 17",
-    "styled-components": "^5"
+    "react-dom": ">= 17"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js
index 61f2f424a..46874ad68 100644
--- a/packages/react/rollup.config.js
+++ b/packages/react/rollup.config.js
@@ -12,7 +12,8 @@ const babelRc = JSON.parse(fs.readFileSync('./.babelrc'))
 const globals = {
   react: 'React',
   'react-dom': 'ReactDOM',
-  'styled-components': 'styled',
+  '@emotion/styled': 'emotionStyled',
+  '@emotion/react': 'emotionReact',
   '@microlink/mql': 'mql'
 }
 
@@ -40,7 +41,6 @@ const build = ({ file, format, name, exports }) => {
   return {
     input: './src/index.js',
     output: {
-      interop: id => (id === 'styled-components' ? 'esModule' : 'default'),
       sourcemap: compress,
       file,
       format,
diff --git a/packages/react/src/components/Card/CardAnimation.js b/packages/react/src/components/Card/CardAnimation.js
index f067544b4..7cde74a7e 100644
--- a/packages/react/src/components/Card/CardAnimation.js
+++ b/packages/react/src/components/Card/CardAnimation.js
@@ -1,4 +1,4 @@
-import { css, keyframes } from 'styled-components'
+import { css, keyframes } from '@emotion/react'
 
 const emptyStatePulse = keyframes`
   0% {
diff --git a/packages/react/src/components/Card/CardContent.js b/packages/react/src/components/Card/CardContent.js
index 2b1e1399c..ac2d54de4 100644
--- a/packages/react/src/components/Card/CardContent.js
+++ b/packages/react/src/components/Card/CardContent.js
@@ -1,9 +1,10 @@
 /* global URL */
 
 import React, { useCallback, useMemo, useContext } from 'react'
-import styled, { css } from 'styled-components'
-import CardText from './CardText'
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
 
+import CardText from './CardText'
 import { transition } from '../../theme'
 import { classNames, media, isLarge, isSmall, isNil } from '../../utils'
 import { GlobalContext } from '../../context/GlobalState'
@@ -28,7 +29,7 @@ const mobileDescriptionStyle = css`
   `};
 `
 
-export const Content = styled('div').attrs({ className: classNames.content })`
+export const Content = styled('div')`
   display: flex;
   padding: 10px 15px;
   min-width: 0;
@@ -41,7 +42,9 @@ export const Content = styled('div').attrs({ className: classNames.content })`
   `};
 `
 
-const Header = styled('header').attrs({ className: classNames.title })`
+Content.defaultProps = { className: classNames.content }
+
+const Header = styled('header')`
   text-align: left;
   font-weight: bold;
   margin: 0;
@@ -58,7 +61,7 @@ const Header = styled('header').attrs({ className: classNames.title })`
   `}
 `
 
-const Description = styled('div').attrs({ className: classNames.description })`
+const Description = styled('div')`
   text-align: left;
   font-size: 14px;
   flex-grow: 2;
@@ -68,7 +71,7 @@ const Description = styled('div').attrs({ className: classNames.description })`
   ${({ cardSize }) => !isLarge(cardSize) && mobileDescriptionStyle};
 `
 
-const Footer = styled('footer').attrs({ className: classNames.url })`
+const Footer = styled('footer')`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -92,7 +95,7 @@ const Author = styled(CardText)`
   }
 `
 
-const PoweredBy = styled('span').attrs({ title: 'microlink.io' })`
+const PoweredBy = styled('span')`
   background: url('https://cdn.microlink.io/logo/logo.svg') no-repeat center
     center;
   display: block;
@@ -124,17 +127,17 @@ const CardContent = () => {
 
   return (
     <Content cardSize={size}>
-      <Header cardSize={size}>
+      <Header cardSize={size} className={classNames.title}>
         <CardText useNanoClamp={false}>{title}</CardText>
       </Header>
       {!isSmallCard && (
-        <Description cardSize={size}>
+        <Description cardSize={size} className={classNames.description}>
           <CardText lines={2}>{description}</CardText>
         </Description>
       )}
-      <Footer cardSize={size}>
+      <Footer cardSize={size} className={classNames.url}>
         <Author useNanoClamp={false}>{formattedUrl}</Author>
-        <PoweredBy onClick={handleOnClick} />
+        <PoweredBy onClick={handleOnClick} title='microlink.io' />
       </Footer>
     </Content>
   )
diff --git a/packages/react/src/components/Card/CardEmpty.js b/packages/react/src/components/Card/CardEmpty.js
index c2c246bcc..f1e163e4b 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 '@emotion/styled'
 
 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..c41f315e8 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 '@emotion/styled'
 
 import MediaButton from './MediaButton'
 import { classNames, media, isLarge } from '../../../../utils'
@@ -48,9 +48,7 @@ const VolumeIcon = styled('svg')`
   stroke: #fff;
 `
 
-const VolumeButton = styled(MediaButton).attrs({
-  className: classNames.volumeControl
-})`
+const VolumeButton = styled(MediaButton)`
   ${VolumeIcon} {
     width: ${({ cardSize }) => (isLarge(cardSize) ? 16 : 14)}px;
     height: ${({ cardSize }) => (isLarge(cardSize) ? 16 : 14)}px;
@@ -64,9 +62,7 @@ const VolumeButton = styled(MediaButton).attrs({
   }
 `
 
-const PlaybackRateButton = styled(MediaButton).attrs({
-  className: classNames.rateControl
-})`
+const PlaybackRateButton = styled(MediaButton)`
   font-size: ${({ cardSize }) => (isLarge(cardSize) ? 12 : 10)}px;
   min-width: ${({ cardSize }) => (isLarge(cardSize) ? 33 : 28)}px;
   line-height: 1;
@@ -87,7 +83,7 @@ const PlaybackRateButton = styled(MediaButton).attrs({
   `}
 `
 
-const TimeLabel = styled('span').attrs({ className: classNames.progressTime })`
+const TimeLabel = styled('span')`
   margin: ${({ right }) => (!right ? '0 auto 0 0' : '0 0 0 auto')};
   font-family: ${font.mono};
   font-size: 12px;
@@ -96,6 +92,8 @@ const TimeLabel = styled('span').attrs({ className: classNames.progressTime })`
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 `
 
+TimeLabel.defaultProps = { className: classNames.progressTime }
+
 const FooterControls = ({
   cardSize,
   currentTime,
@@ -115,17 +113,19 @@ const FooterControls = ({
       {isLargeCard && <TimeLabel>{currentTime}</TimeLabel>}
 
       <VolumeButton
-        title={isMuted ? 'Unmute' : 'Mute'}
         cardSize={cardSize}
+        className={classNames.volumeControl}
         onClick={onMuteClick}
+        title={isMuted ? 'Unmute' : 'Mute'}
       >
         <VolumeIcon as={VolumeComponent} />
       </VolumeButton>
 
       <PlaybackRateButton
-        title='Playback Rate'
         cardSize={cardSize}
+        className={classNames.rateControl}
         onClick={onPlaybackRateClick}
+        title='Playback Rate'
       >
         <span>{playbackRate}x</span>
       </PlaybackRateButton>
diff --git a/packages/react/src/components/Card/CardMedia/Controls/MediaButton.js b/packages/react/src/components/Card/CardMedia/Controls/MediaButton.js
index d3ef2866e..3f5afc7a5 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 '@emotion/styled'
 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..4d35b6a62 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/PlaybackButton.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/PlaybackButton.js
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react'
-import styled, { css } from 'styled-components'
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
 
 import MediaButton from './MediaButton'
 import { classNames, isSmall, isLarge, media } from '../../../../utils'
@@ -40,9 +41,7 @@ const PlaybackIcon = styled('svg')`
   stroke: #fff;
 `
 
-const PlaybackButtonWrap = styled(MediaButton).attrs({
-  className: classNames.playbackControl
-})`
+const PlaybackButtonWrap = styled(MediaButton)`
   ${PlaybackIcon} {
     ${({ cardSize }) => css`
       width: ${iconSizes[cardSize]};
@@ -59,6 +58,8 @@ const PlaybackButtonWrap = styled(MediaButton).attrs({
   }
 `
 
+PlaybackButtonWrap.defaultProps = { className: classNames.playbackControl }
+
 const PlaybackButton = ({ isPlaying, ...props }) => {
   const PlaybackComponent = useMemo(() => (isPlaying ? Pause : Play), [
     isPlaying
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..45cacff01 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,6 @@
-import styled, { css } from 'styled-components'
+import React from 'react'
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
 
 import { transition } from '../../../../../theme'
 
@@ -9,14 +11,7 @@ const scrubberSizeScales = { normal: 0.8, small: 0.9 }
 const getScrubberSize = size =>
   Math.floor(SCRUBBER_SIZE * (scrubberSizeScales[size] || 1))
 
-const Scrubber = styled('div').attrs(({ isVisible, positionX }) => ({
-  style: {
-    left: positionX,
-    transform: `scale(${isVisible ? 1 : 0.5}) translate(-50%, -50%)`,
-    opacity: isVisible ? 1 : 0,
-    visibility: isVisible ? 'visible' : 'hidden'
-  }
-}))`
+const StyledScrubber = styled('div')`
   position: absolute;
   top: 50%;
   background: #ffffff;
@@ -38,4 +33,17 @@ const Scrubber = styled('div').attrs(({ isVisible, positionX }) => ({
   }}
 `
 
+const Scrubber = ({ cardSize, isVisible, positionX }) => {
+  return (
+    <StyledScrubber
+      cardSize={cardSize} style={{
+        left: positionX,
+        transform: `scale(${isVisible ? 1 : 0.5}) translate(-50%, -50%)`,
+        opacity: isVisible ? 1 : 0,
+        visibility: isVisible ? 'visible' : 'hidden'
+      }}
+    />
+  )
+}
+
 export default Scrubber
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..779874559 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 '@emotion/styled'
 
 import { font, transition } from '../../../../../theme'
 
@@ -8,17 +8,7 @@ const BASE_FONT_SIZE = 11
 const sizeScales = { normal: 0.8 }
 const getMarkerFontSize = size => BASE_FONT_SIZE * (sizeScales[size] || 1)
 
-const TooltipBase = styled('span').attrs(
-  ({ position, isDragging, visible }) => ({
-    style: {
-      left: `${position}px`,
-      top: visible ? '-4px' : '0px',
-      visibility: visible ? 'visible' : 'hidden',
-      opacity: visible ? 1 : 0,
-      transform: `translate(-50%, ${!isDragging ? -100 : -110}%)`
-    }
-  })
-)`
+const TooltipBase = styled('span')`
   position: absolute;
   background: rgba(24, 25, 25, 0.75);
   color: #fff;
@@ -38,11 +28,15 @@ const Tooltip = forwardRef(
   ({ isDragging, isVisible, label, positionX, size, ...props }, ref) => (
     <>
       <TooltipBase
-        visible={isVisible}
-        position={positionX}
         cardSize={size}
         ref={ref}
-        isDragging={isDragging}
+        style={{
+          left: `${positionX}px`,
+          top: isVisible ? '-4px' : '0px',
+          visibility: isVisible ? 'visible' : 'hidden',
+          opacity: isVisible ? 1 : 0,
+          transform: `translate(-50%, ${!isDragging ? -100 : -110}%)`
+        }}
         {...props}
       >
         {label}
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..c32f916ae 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,6 @@
 import React, { useCallback, useContext, useMemo, useRef } from 'react'
-import styled, { css } from 'styled-components'
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
 
 import { transition } from '../../../../../theme'
 import {
@@ -25,28 +26,14 @@ const getProgressBarHeight = size =>
 const getProgressBarActiveHeight = size =>
   Math.floor(HEIGHT * (activeHeightScales[size] || 1))
 
-const OuterWrap = styled('div').attrs(() => ({
-  className: classNames.progressBar
-}))`
+const OuterWrap = styled('div')`
   position: relative;
   padding: ${PADDING}px ${PADDING / 2}px ${PADDING / 2}px;
   z-index: 2;
   backface-visibility: hidden;
 `
 
-const BarsWrap = styled('div').attrs(({ cardSize, isDragging }) => {
-  if (isDragging) {
-    const activeHeight = getProgressBarActiveHeight(cardSize)
-
-    return {
-      style: {
-        height: `${activeHeight}px`
-      }
-    }
-  }
-
-  return {}
-})`
+const BarsWrap = styled('div')`
   background: transparent;
   border-radius: 9999px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
@@ -77,11 +64,7 @@ const ProgressLine = styled('div')`
   overflow: hidden;
 `
 
-const ProgressMask = styled('div').attrs(({ maskScale }) => ({
-  style: {
-    transform: `scaleX(${maskScale})`
-  }
-}))`
+const ProgressMask = styled('div')`
   position: absolute;
   left: 0;
   top: -50%;
@@ -92,16 +75,7 @@ const ProgressMask = styled('div').attrs(({ maskScale }) => ({
   will-change: transform;
 `
 
-const ProgressHover = styled('div').attrs(
-  ({ cursorRatio, isHovering, progressPercent }) => ({
-    style: {
-      left: progressPercent,
-      transform: `scaleX(${cursorRatio})`,
-      opacity: isHovering ? 1 : 0,
-      visibility: isHovering ? 'visible' : 'hidden'
-    }
-  })
-)`
+const ProgressHover = styled('div')`
   position: absolute;
   top: 0;
   right: 0;
@@ -112,12 +86,7 @@ const ProgressHover = styled('div').attrs(
   will-change: left, transform, opacity, visible;
 `
 
-const BufferedChunk = styled('div').attrs(({ start, end }) => ({
-  style: {
-    left: `${start}px`,
-    right: `${end}px`
-  }
-}))`
+const BufferedChunk = styled('div')`
   background: rgba(255, 255, 255, 0.35);
   position: absolute;
   top: 0;
@@ -153,6 +122,20 @@ const ProgressBar = ({
     return 0
   }, [])
 
+  const barsWrapStyles = useMemo(() => {
+    if (isDragging) {
+      const activeHeight = getProgressBarActiveHeight(size)
+
+      return {
+        style: {
+          height: `${activeHeight}px`
+        }
+      }
+    }
+
+    return {}
+  }, [isDragging, size])
+
   const progressRatio = useMemo(() => clampNumber(progress / duration, 0, 1), [
     duration,
     progress
@@ -218,20 +201,23 @@ const ProgressBar = ({
   ])
 
   return (
-    <OuterWrap cardSize={size} ref={wrapRef} {...mouseEvents}>
-      <BarsWrap cardSize={size} isDragging={isDragging}>
+    <OuterWrap cardSize={size} className={classNames.progressBar} ref={wrapRef} {...mouseEvents}>
+      <BarsWrap cardSize={size} style={barsWrapStyles}>
         <ProgressLine>
           <ProgressHover
-            cursorRatio={cursorRatio}
-            isHovering={isHovering}
-            progressPercent={progressPercent}
+            style={{
+              left: progressPercent,
+              transform: `scaleX(${cursorRatio})`,
+              opacity: isHovering ? 1 : 0,
+              visibility: isHovering ? 'visible' : 'hidden'
+            }}
           />
 
-          {bufferedMediaChunks.map(({ key, ...chunk }) => (
-            <BufferedChunk key={key} {...chunk} />
+          {bufferedMediaChunks.map(({ key, end, start }) => (
+            <BufferedChunk key={key} style={{ left: `${start}px`, right: `${end}px` }} />
           ))}
 
-          <ProgressMask maskScale={progressRatio} />
+          <ProgressMask style={{ transform: `scaleX(${progressRatio})` }} />
         </ProgressLine>
 
         <Scrubber
diff --git a/packages/react/src/components/Card/CardMedia/Controls/SeekButton.js b/packages/react/src/components/Card/CardMedia/Controls/SeekButton.js
index e70922a65..1e7b40e31 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 '@emotion/styled'
 
 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..a2923da46 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/Spinner.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/Spinner.js
@@ -1,5 +1,6 @@
 import React from 'react'
-import styled, { css, keyframes } from 'styled-components'
+import { css, keyframes } from '@emotion/react'
+import styled from '@emotion/styled'
 
 import { transition } from '../../../../theme'
 import { classNames } from '../../../../utils'
@@ -38,12 +39,7 @@ const dash = keyframes`
   }
 `
 
-const Wrap = styled(MediaButton).attrs(({ isVisible }) => ({
-  style: {
-    opacity: isVisible ? 1 : 0,
-    visibility: isVisible ? 'visible' : 'hidden'
-  }
-}))(({ cardSize }) => {
+const Wrap = styled(MediaButton)(({ cardSize }) => {
   const size = `${getSpinnerSize(cardSize)}px`
   const offset = `${getSpinnerOffset(cardSize)}px`
 
@@ -74,7 +70,12 @@ const Circle = styled('circle')`
 `
 
 const Spinner = ({ size, isVisible }) => (
-  <Wrap cardSize={size} className={classNames.spinner} isVisible={isVisible}>
+  <Wrap
+    cardSize={size} className={classNames.spinner} style={{
+      opacity: isVisible ? 1 : 0,
+      visibility: isVisible ? 'visible' : 'hidden'
+    }}
+  >
     <Svg viewBox='0 0 50 50'>
       <Circle cx='25' cy='25' r='20' />
     </Svg>
diff --git a/packages/react/src/components/Card/CardMedia/Controls/index.js b/packages/react/src/components/Card/CardMedia/Controls/index.js
index e6a78de3e..ae7d02f3b 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/index.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/index.js
@@ -8,8 +8,8 @@ import React, {
   useRef,
   useState
 } from 'react'
-
-import styled, { css } from 'styled-components'
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
 
 import FooterControls from './FooterControls'
 import PlaybackButton from './PlaybackButton'
@@ -17,7 +17,6 @@ import ProgressBar from './ProgressBar'
 import SeekButton from './SeekButton'
 import Spinner from './Spinner'
 import { transition } from '../../../../theme'
-
 import {
   classNames,
   formatSeconds,
@@ -25,7 +24,6 @@ import {
   isFunction,
   clampNumber
 } from '../../../../utils'
-
 import { GlobalContext } from '../../../../context/GlobalState'
 
 const SPACE_KEY = 32
@@ -33,7 +31,7 @@ const L_ARROW_KEY = 37
 const R_ARROW_KEY = 39
 const M_KEY = 77
 
-const OuterWrap = styled('div').attrs({ className: classNames.mediaControls })`
+const OuterWrap = styled('div')`
   position: absolute;
   left: 0;
   top: 0;
@@ -431,6 +429,7 @@ const Controls = ({ MediaComponent, mediaProps }) => {
       {controls && (
         <OuterWrap
           {...outerWrapTitle}
+          className={classNames.mediaControls}
           tabIndex={0}
           hasInteracted={hasInteracted}
           isDragging={isDragging}
diff --git a/packages/react/src/components/Card/CardMedia/Image.js b/packages/react/src/components/Card/CardMedia/Image.js
index f01bce482..c28d60912 100644
--- a/packages/react/src/components/Card/CardMedia/Image.js
+++ b/packages/react/src/components/Card/CardMedia/Image.js
@@ -1,16 +1,16 @@
 import React, { useContext } from 'react'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 
 import Wrap from './Wrap'
 import { GlobalContext } from '../../../context/GlobalState'
 import { classNames, imageProxy } from '../../../utils'
 
-const ImageWrap = styled(Wrap).attrs({
-  className: `${classNames.media} ${classNames.image}`
-})`
+const ImageWrap = styled(Wrap)`
   background-image: ${({ url }) => (url ? `url('${imageProxy(url)}')` : '')};
 `
 
+ImageWrap.defaultProps = { className: `${classNames.media} ${classNames.image}` }
+
 const ImageComponent = props => {
   const {
     state: { imageUrl }
diff --git a/packages/react/src/components/Card/CardMedia/Video.js b/packages/react/src/components/Card/CardMedia/Video.js
index 8e653f594..3a86d5cc1 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 '@emotion/styled'
 
 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..cd286d5d1 100644
--- a/packages/react/src/components/Card/CardMedia/Wrap.js
+++ b/packages/react/src/components/Card/CardMedia/Wrap.js
@@ -1,5 +1,6 @@
 import React, { useContext } from 'react'
-import styled, { css } from 'styled-components'
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
 
 import { GlobalContext } from '../../../context/GlobalState'
 import { media } from '../../../utils'
@@ -38,9 +39,10 @@ const StyledWrap = styled('div')`
     display: block;
   }
 
-  ${({ cardSize }) => mediaSizeStyles[cardSize]};
-
-  ${loadingOverlay};
+  ${({ isLoading, cardSize }) => css`
+    ${mediaSizeStyles[cardSize]}
+    ${loadingOverlay({ isLoading })}
+  `};
 `
 
 const Wrap = props => {
diff --git a/packages/react/src/components/Card/CardMedia/loader.js b/packages/react/src/components/Card/CardMedia/loader.js
index 722017f6c..23b0d7b48 100644
--- a/packages/react/src/components/Card/CardMedia/loader.js
+++ b/packages/react/src/components/Card/CardMedia/loader.js
@@ -1,4 +1,6 @@
-import styled, { css } from 'styled-components'
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+
 import { transition } from '../../../theme'
 
 export const ImageLoadCatcher = styled('img')`
@@ -8,7 +10,7 @@ export const ImageLoadCatcher = styled('img')`
   z-index: -1;
 `
 
-export const loadingOverlay = css`
+export const loadingOverlay = ({ isLoading }) => css`
   &::after {
     content: '';
     position: absolute;
@@ -20,10 +22,7 @@ export const loadingOverlay = css`
     z-index: 1;
     transition: ${transition.medium('opacity', 'visibility')};
     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..a373613cf 100644
--- a/packages/react/src/components/Card/CardText.js
+++ b/packages/react/src/components/Card/CardText.js
@@ -1,7 +1,8 @@
 /* eslint-disable multiline-ternary */
 
 import React from 'react'
-import styled, { css } from 'styled-components'
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
 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..421424646 100644
--- a/packages/react/src/components/Card/CardWrap.js
+++ b/packages/react/src/components/Card/CardWrap.js
@@ -1,5 +1,6 @@
 import { createElement, forwardRef, useContext } from 'react'
-import styled, { css } from 'styled-components'
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
 
 import { GlobalContext } from '../../context/GlobalState'
 import { font, animation, speed } from '../../theme'
@@ -43,8 +44,7 @@ const rtlStyle = ({ cardSize }) => css`
   flex-direction: ${isLarge(cardSize) ? 'column-reverse' : 'row-reverse'};
 `
 
-const baseStyle = css(
-  () => `
+const baseStyle = css`
   max-width: var(--microlink-max-width, 500px);
   background-color: var(--microlink-background-color, #fff);
   border-width: var(--microlink-border-width, 1px);
@@ -65,18 +65,22 @@ const baseStyle = css(
     outline: 0;
   }
 `
-)
-
-const Element = styled('a')(
-  baseStyle,
-  ({ isLoading, contrast }) => !isLoading && !contrast && hoverStyle,
-  ({ cardSize }) => isLarge(cardSize) && largeStyle,
-  ({ direction }) => direction === 'rtl' && rtlStyle,
-  ({ backgroundColor, color, contrast }) =>
-    contrast && color && backgroundColor && contrastStyle,
-  ({ backgroundColor, color, contrast }) =>
-    contrast && (!color || !backgroundColor) && hoverStyle
-)
+
+const styles = ({ backgroundColor, cardSize, color, contrast, direction, isLoading }) => css`
+  ${baseStyle}
+
+  ${!isLoading && !contrast && hoverStyle}
+
+  ${isLarge(cardSize) && largeStyle}
+
+  ${direction === 'rtl' && rtlStyle({ cardSize })}
+
+  ${contrast && color && backgroundColor && contrastStyle({ backgroundColor, color })}
+
+  ${contrast && (!color || !backgroundColor) && hoverStyle}
+`
+
+const Element = styled('a')`${styles}`
 
 const CardWrap = forwardRef(({ href, rel, target, ...restProps }, ref) => {
   const {
diff --git a/packages/react/src/utils/index.js b/packages/react/src/utils/index.js
index 847ec77dd..820d0fbdc 100644
--- a/packages/react/src/utils/index.js
+++ b/packages/react/src/utils/index.js
@@ -1,6 +1,6 @@
 import { fetchFromApi, getApiUrl as createApiUrl } from '@microlink/mql'
 import localhostUrl from 'localhost-url-regex'
-import { css } from 'styled-components'
+import { css } from '@emotion/react'
 
 export const isSSR = typeof window === 'undefined'
 
diff --git a/packages/react/stories/__snapshots__/index.test.js.snap b/packages/react/stories/__snapshots__/index.test.js.snap
index 39f56414f..c0fa2cf40 100644
--- a/packages/react/stories/__snapshots__/index.test.js.snap
+++ b/packages/react/stories/__snapshots__/index.test.js.snap
@@ -1,80 +1,143 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots media audio 1`] = `
-.c6 {
+@keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -82,15 +145,25 @@ exports[`Storyshots media audio 1`] = `
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -106,8 +179,68 @@ exports[`Storyshots media audio 1`] = `
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
+}
+
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
+  display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
+}
+
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
+}
+
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -115,15 +248,17 @@ exports[`Storyshots media audio 1`] = `
   -webkit-flex: 0 0 48px;
   -ms-flex: 0 0 48px;
   flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c10::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c10::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -139,8 +274,83 @@ exports[`Storyshots media audio 1`] = `
   visibility: hidden;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-28 {
+  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;
+  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;
+}
+
+.emotion-30 {
+  opacity: 0.8;
+  height: 16px;
+  width: 75%;
+  display: block;
+  background: #e1e8ed;
+  margin: 0 20px 0 0;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
+}
+
+.emotion-35 {
+  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;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 382px;
+}
+
+.emotion-35:active,
+.emotion-35:hover {
+  outline: 0;
+}
+
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -148,19 +358,21 @@ exports[`Storyshots media audio 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-39::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
+.emotion-39::before {
   padding-bottom: 0;
 }
 
-.c14::after {
+.emotion-39::after {
   content: '';
   position: absolute;
   left: 0;
@@ -176,199 +388,71 @@ exports[`Storyshots media audio 1`] = `
   visibility: hidden;
 }
 
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-.c7 {
+.emotion-43 {
   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);
-  }
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-  className="c0"
+  className="emotion-0 emotion-1"
 >
   <a
-    className="c1"
+    className="emotion-2 emotion-3"
     href="https://open.spotify.com/track/1W2919zs8SBCLTrOB1ftQT?si=4PcqgjH5RlWCvB5q4ukdnw"
   >
     https://open.spotify.com/track/1W2919zs8SBCLTrOB1ftQT?si=4PcqgjH5RlWCvB5q4ukdnw
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     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"
+      className="emotion-7 emotion-8 emotion-9 emotion-10"
     />
     <div
-      className="c6 microlink_card__content"
+      className="microlink_card__content emotion-11 emotion-12"
     >
       <span
-        className="c7"
+        className="emotion-13 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -376,52 +460,52 @@ exports[`Storyshots media audio 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     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"
+      className="emotion-7 emotion-8 emotion-26 emotion-10"
     />
     <div
-      className="c11 microlink_card__content"
+      className="microlink_card__content emotion-28 emotion-12"
     >
       <span
-        className="c12"
+        className="emotion-30 emotion-14"
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c13 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-35 emotion-6"
     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"
+      className="emotion-7 emotion-8 emotion-39 emotion-10"
     />
     <div
-      className="c15 microlink_card__content"
+      className="microlink_card__content emotion-41 emotion-12"
     >
       <span
-        className="c16"
+        className="emotion-43 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -429,7 +513,7 @@ exports[`Storyshots media audio 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
@@ -437,32 +521,143 @@ exports[`Storyshots media audio 1`] = `
 `;
 
 exports[`Storyshots media iframe 1`] = `
-.c6 {
+@keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
+}
+
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
+}
+
+.emotion-5 {
+  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;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -470,15 +665,25 @@ exports[`Storyshots media iframe 1`] = `
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -494,138 +699,96 @@ exports[`Storyshots media iframe 1`] = `
   visibility: hidden;
 }
 
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-.c7 {
+.emotion-13 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
   height: 15px;
 }
 
-.c8 {
+.emotion-15 {
   opacity: 0.8;
   height: 14px;
   width: 95%;
   display: block;
   position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
   -webkit-animation-delay: 0.125s;
   animation-delay: 0.125s;
 }
 
-.c9 {
+.emotion-19 {
   opacity: 0.8;
   height: 12px;
   width: 30%;
   display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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"
+  className="emotion-0 emotion-1"
 >
   <a
-    className="c1"
+    className="emotion-2 emotion-3"
     href="https://twitter.com/futurism/status/882987478541533189"
   >
     https://twitter.com/futurism/status/882987478541533189
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     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"
+      className="emotion-7 emotion-8 emotion-9 emotion-10"
     />
     <div
-      className="c6 microlink_card__content"
+      className="microlink_card__content emotion-11 emotion-12"
     >
       <span
-        className="c7"
+        className="emotion-13 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -633,7 +796,7 @@ exports[`Storyshots media iframe 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
@@ -641,80 +804,143 @@ exports[`Storyshots media iframe 1`] = `
 `;
 
 exports[`Storyshots media image 1`] = `
-.c6 {
-  display: -webkit-box;
+@keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
+  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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
 }
 
-.c15 {
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
+}
+
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -722,15 +948,25 @@ exports[`Storyshots media image 1`] = `
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -746,8 +982,68 @@ exports[`Storyshots media image 1`] = `
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
+}
+
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
+  display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
+}
+
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
+}
+
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -755,15 +1051,17 @@ exports[`Storyshots media image 1`] = `
   -webkit-flex: 0 0 48px;
   -ms-flex: 0 0 48px;
   flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c10::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c10::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -779,8 +1077,83 @@ exports[`Storyshots media image 1`] = `
   visibility: hidden;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-28 {
+  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;
+  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;
+}
+
+.emotion-30 {
+  opacity: 0.8;
+  height: 16px;
+  width: 75%;
+  display: block;
+  background: #e1e8ed;
+  margin: 0 20px 0 0;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
+}
+
+.emotion-35 {
+  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;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 382px;
+}
+
+.emotion-35:active,
+.emotion-35:hover {
+  outline: 0;
+}
+
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -788,19 +1161,21 @@ exports[`Storyshots media image 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-39::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
+.emotion-39::before {
   padding-bottom: 0;
 }
 
-.c14::after {
+.emotion-39::after {
   content: '';
   position: absolute;
   left: 0;
@@ -816,199 +1191,71 @@ exports[`Storyshots media image 1`] = `
   visibility: hidden;
 }
 
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-.c7 {
+.emotion-43 {
   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);
-  }
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-  className="c0"
+  className="emotion-0 emotion-1"
 >
   <a
-    className="c1"
+    className="emotion-2 emotion-3"
     href="https://www.apple.com/music/"
   >
     https://www.apple.com/music/
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="ltr"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-9 emotion-10"
     />
     <div
-      className="c6 microlink_card__content"
+      className="microlink_card__content emotion-11 emotion-12"
     >
       <span
-        className="c7"
+        className="emotion-13 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -1016,52 +1263,52 @@ exports[`Storyshots media image 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="ltr"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-26 emotion-10"
     />
     <div
-      className="c11 microlink_card__content"
+      className="microlink_card__content emotion-28 emotion-12"
     >
       <span
-        className="c12"
+        className="emotion-30 emotion-14"
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c13 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-35 emotion-6"
     direction="ltr"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-39 emotion-10"
     />
     <div
-      className="c15 microlink_card__content"
+      className="microlink_card__content emotion-41 emotion-12"
     >
       <span
-        className="c16"
+        className="emotion-43 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -1069,7 +1316,7 @@ exports[`Storyshots media image 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
@@ -1077,129 +1324,169 @@ exports[`Storyshots media image 1`] = `
 `;
 
 exports[`Storyshots media logo 1`] = `
-.c6 {
+@keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
   position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
 }
 
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
 }
 
-.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;
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  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;
+  -webkit-flex: 0 0 125px;
+  -ms-flex: 0 0 125px;
+  flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c10::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c10::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -1215,142 +1502,143 @@ exports[`Storyshots media logo 1`] = `
   visibility: hidden;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-.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 {
+.emotion-13 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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 {
+.emotion-15 {
   opacity: 0.8;
   height: 14px;
   width: 95%;
   display: block;
   position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
   -webkit-animation-delay: 0.125s;
   animation-delay: 0.125s;
 }
 
-.c9 {
+.emotion-19 {
   opacity: 0.8;
   height: 12px;
   width: 30%;
   display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
+  display: block;
   overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
+  height: auto;
+  position: relative;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
+}
+
+.emotion-26::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
+}
+
+.emotion-26::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;
+}
+
+.emotion-28 {
   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);
+  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;
+  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;
 }
 
-.c2:active,
-.c2:hover {
-  outline: 0;
+.emotion-30 {
+  opacity: 0.8;
+  height: 16px;
+  width: 75%;
+  display: block;
+  background: #e1e8ed;
+  margin: 0 20px 0 0;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.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);
+.emotion-35 {
+  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;
@@ -1361,9 +1649,7 @@ exports[`Storyshots media logo 1`] = `
   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;
@@ -1371,80 +1657,125 @@ exports[`Storyshots media logo 1`] = `
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-  className="c0"
+  className="emotion-0 emotion-1"
 >
   <a
-    className="c1"
+    className="emotion-2 emotion-3"
     href="https://www.apple.com/music/"
   >
     https://www.apple.com/music/
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="ltr"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-9 emotion-10"
     />
     <div
-      className="c6 microlink_card__content"
+      className="microlink_card__content emotion-11 emotion-12"
     >
       <span
-        className="c7"
+        className="emotion-13 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -1452,52 +1783,52 @@ exports[`Storyshots media logo 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="ltr"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-26 emotion-10"
     />
     <div
-      className="c11 microlink_card__content"
+      className="microlink_card__content emotion-28 emotion-12"
     >
       <span
-        className="c12"
+        className="emotion-30 emotion-14"
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c13 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-35 emotion-6"
     direction="ltr"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-39 emotion-10"
     />
     <div
-      className="c15 microlink_card__content"
+      className="microlink_card__content emotion-41 emotion-12"
     >
       <span
-        className="c16"
+        className="emotion-43 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -1505,7 +1836,7 @@ exports[`Storyshots media logo 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
@@ -1513,80 +1844,143 @@ exports[`Storyshots media logo 1`] = `
 `;
 
 exports[`Storyshots media screenshot 1`] = `
-.c6 {
+@keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
+}
+
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
 }
 
-.c11 {
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
+}
+
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
 }
 
-.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;
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -1594,15 +1988,25 @@ exports[`Storyshots media screenshot 1`] = `
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -1618,61 +2022,86 @@ exports[`Storyshots media screenshot 1`] = `
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
   display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
   display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
 }
 
-.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;
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
   position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -1688,77 +2117,48 @@ exports[`Storyshots media screenshot 1`] = `
   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;
+.emotion-28 {
+  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;
+  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;
 }
 
-.c12 {
+.emotion-30 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-35 {
+  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;
@@ -1769,118 +2169,133 @@ exports[`Storyshots media screenshot 1`] = `
   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;
 }
 
-.c2:active,
-.c2:hover {
+.emotion-35:active,
+.emotion-35: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);
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
   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;
+  height: auto;
   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: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c13:active,
-.c13:hover {
-  outline: 0;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
+}
+
+.emotion-39::before {
+  padding-bottom: 0;
+}
+
+.emotion-39::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;
 }
 
-.c0 {
+.emotion-41 {
   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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: space-around;
+  justify-content: space-around;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
 }
 
-.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);
-  }
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-  className="c0"
+  className="emotion-0 emotion-1"
 >
   <a
-    className="c1"
+    className="emotion-2 emotion-3"
     href="https://www.apple.com/music/"
   >
     https://www.apple.com/music/
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="ltr"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-9 emotion-10"
     />
     <div
-      className="c6 microlink_card__content"
+      className="microlink_card__content emotion-11 emotion-12"
     >
       <span
-        className="c7"
+        className="emotion-13 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -1888,52 +2303,52 @@ exports[`Storyshots media screenshot 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="ltr"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-26 emotion-10"
     />
     <div
-      className="c11 microlink_card__content"
+      className="microlink_card__content emotion-28 emotion-12"
     >
       <span
-        className="c12"
+        className="emotion-30 emotion-14"
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c13 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-35 emotion-6"
     direction="ltr"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-39 emotion-10"
     />
     <div
-      className="c15 microlink_card__content"
+      className="microlink_card__content emotion-41 emotion-12"
     >
       <span
-        className="c16"
+        className="emotion-43 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -1941,7 +2356,7 @@ exports[`Storyshots media screenshot 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
@@ -1949,80 +2364,143 @@ exports[`Storyshots media screenshot 1`] = `
 `;
 
 exports[`Storyshots media video 1`] = `
-.c6 {
+@keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -2030,15 +2508,25 @@ exports[`Storyshots media video 1`] = `
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -2054,8 +2542,68 @@ exports[`Storyshots media video 1`] = `
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
+}
+
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
+  display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
+}
+
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
+}
+
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -2063,15 +2611,17 @@ exports[`Storyshots media video 1`] = `
   -webkit-flex: 0 0 48px;
   -ms-flex: 0 0 48px;
   flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c10::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c10::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -2087,8 +2637,83 @@ exports[`Storyshots media video 1`] = `
   visibility: hidden;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-28 {
+  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;
+  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;
+}
+
+.emotion-30 {
+  opacity: 0.8;
+  height: 16px;
+  width: 75%;
+  display: block;
+  background: #e1e8ed;
+  margin: 0 20px 0 0;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
+}
+
+.emotion-35 {
+  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;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 382px;
+}
+
+.emotion-35:active,
+.emotion-35:hover {
+  outline: 0;
+}
+
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -2096,19 +2721,21 @@ exports[`Storyshots media video 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-39::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
+.emotion-39::before {
   padding-bottom: 0;
 }
 
-.c14::after {
+.emotion-39::after {
   content: '';
   position: absolute;
   left: 0;
@@ -2124,199 +2751,71 @@ exports[`Storyshots media video 1`] = `
   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 {
+.emotion-41 {
   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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: space-around;
+  justify-content: space-around;
   -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;
-  }
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-  className="c0"
+  className="emotion-0 emotion-1"
 >
   <a
-    className="c1"
+    className="emotion-2 emotion-3"
     href="https://www.facebook.com/natgeo/videos/10156364216738951/"
   >
     https://www.facebook.com/natgeo/videos/10156364216738951/
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     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"
+      className="emotion-7 emotion-8 emotion-9 emotion-10"
     />
     <div
-      className="c6 microlink_card__content"
+      className="microlink_card__content emotion-11 emotion-12"
     >
       <span
-        className="c7"
+        className="emotion-13 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -2324,52 +2823,52 @@ exports[`Storyshots media video 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     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"
+      className="emotion-7 emotion-8 emotion-26 emotion-10"
     />
     <div
-      className="c11 microlink_card__content"
+      className="microlink_card__content emotion-28 emotion-12"
     >
       <span
-        className="c12"
+        className="emotion-30 emotion-14"
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c13 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-35 emotion-6"
     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"
+      className="emotion-7 emotion-8 emotion-39 emotion-10"
     />
     <div
-      className="c15 microlink_card__content"
+      className="microlink_card__content emotion-41 emotion-12"
     >
       <span
-        className="c16"
+        className="emotion-43 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -2377,7 +2876,7 @@ exports[`Storyshots media video 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
@@ -2385,129 +2884,169 @@ exports[`Storyshots media video 1`] = `
 `;
 
 exports[`Storyshots props autoPlay (disabled) 1`] = `
-.c6 {
+@keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
   position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
 }
 
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
 }
 
-.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;
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  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;
+  -webkit-flex: 0 0 125px;
+  -ms-flex: 0 0 125px;
+  flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c10::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c10::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -2523,142 +3062,143 @@ exports[`Storyshots props autoPlay (disabled) 1`] = `
   visibility: hidden;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-.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 {
+.emotion-13 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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 {
+.emotion-15 {
   opacity: 0.8;
   height: 14px;
   width: 95%;
   display: block;
   position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
   -webkit-animation-delay: 0.125s;
   animation-delay: 0.125s;
 }
 
-.c9 {
+.emotion-19 {
   opacity: 0.8;
   height: 12px;
   width: 30%;
   display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
+  display: block;
   overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
+  height: auto;
+  position: relative;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
+}
+
+.emotion-26::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
+}
+
+.emotion-26::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;
+}
+
+.emotion-28 {
   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);
+  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;
+  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;
 }
 
-.c2:active,
-.c2:hover {
-  outline: 0;
+.emotion-30 {
+  opacity: 0.8;
+  height: 16px;
+  width: 75%;
+  display: block;
+  background: #e1e8ed;
+  margin: 0 20px 0 0;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.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);
+.emotion-35 {
+  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;
@@ -2669,9 +3209,7 @@ exports[`Storyshots props autoPlay (disabled) 1`] = `
   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;
@@ -2679,80 +3217,125 @@ exports[`Storyshots props autoPlay (disabled) 1`] = `
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-  className="c0"
+  className="emotion-0 emotion-1"
 >
   <a
-    className="c1"
+    className="emotion-2 emotion-3"
     href="https://www.facebook.com/natgeo/videos/10156364216738951/"
   >
     https://www.facebook.com/natgeo/videos/10156364216738951/
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     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"
+      className="emotion-7 emotion-8 emotion-9 emotion-10"
     />
     <div
-      className="c6 microlink_card__content"
+      className="microlink_card__content emotion-11 emotion-12"
     >
       <span
-        className="c7"
+        className="emotion-13 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -2760,52 +3343,52 @@ exports[`Storyshots props autoPlay (disabled) 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     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"
+      className="emotion-7 emotion-8 emotion-26 emotion-10"
     />
     <div
-      className="c11 microlink_card__content"
+      className="microlink_card__content emotion-28 emotion-12"
     >
       <span
-        className="c12"
+        className="emotion-30 emotion-14"
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c13 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-35 emotion-6"
     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"
+      className="emotion-7 emotion-8 emotion-39 emotion-10"
     />
     <div
-      className="c15 microlink_card__content"
+      className="microlink_card__content emotion-41 emotion-12"
     >
       <span
-        className="c16"
+        className="emotion-43 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -2813,7 +3396,7 @@ exports[`Storyshots props autoPlay (disabled) 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
@@ -2821,80 +3404,150 @@ exports[`Storyshots props autoPlay (disabled) 1`] = `
 `;
 
 exports[`Storyshots props contrast 1`] = `
-.c6 {
+@keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+  transition-property: background,border-color;
+  will-change: background,border-color;
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:hover {
+  background-color: var(--microlink-hover-background-color, #f5f8fa);
+  border-color: var(--microlink-hover-border-color, #8899A680);
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -2902,15 +3555,25 @@ exports[`Storyshots props contrast 1`] = `
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -2926,61 +3589,86 @@ exports[`Storyshots props contrast 1`] = `
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
   display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
   display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
 }
 
-.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;
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
   position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -2996,113 +3684,48 @@ exports[`Storyshots props contrast 1`] = `
   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;
+.emotion-28 {
+  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;
+  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;
 }
 
-.c12 {
+.emotion-30 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-35 {
+  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;
@@ -3113,98 +3736,140 @@ exports[`Storyshots props contrast 1`] = `
   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 {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-35:hover {
+  background-color: var(--microlink-hover-background-color, #f5f8fa);
+  border-color: var(--microlink-hover-border-color, #8899A680);
 }
 
-.c1 {
-  color: #0366d6;
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-<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"
+.emotion-39::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;
+}
+
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+}
+
+<div
+  className="emotion-0 emotion-1"
+>
+  <a
+    className="emotion-2 emotion-3"
+    href="https://www.apple.com/music/"
+  >
+    https://www.apple.com/music/
+  </a>
+  <a
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
+    direction="ltr"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-9 emotion-10"
     />
     <div
-      className="c6 microlink_card__content"
+      className="microlink_card__content emotion-11 emotion-12"
     >
       <span
-        className="c7"
+        className="emotion-13 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -3212,52 +3877,52 @@ exports[`Storyshots props contrast 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="ltr"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-26 emotion-10"
     />
     <div
-      className="c11 microlink_card__content"
+      className="microlink_card__content emotion-28 emotion-12"
     >
       <span
-        className="c12"
+        className="emotion-30 emotion-14"
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c13 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-35 emotion-6"
     direction="ltr"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-39 emotion-10"
     />
     <div
-      className="c15 microlink_card__content"
+      className="microlink_card__content emotion-41 emotion-12"
     >
       <span
-        className="c16"
+        className="emotion-43 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -3265,7 +3930,7 @@ exports[`Storyshots props contrast 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
@@ -3273,80 +3938,143 @@ exports[`Storyshots props contrast 1`] = `
 `;
 
 exports[`Storyshots props controls (disabled) 1`] = `
-.c6 {
+@keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -3354,15 +4082,25 @@ exports[`Storyshots props controls (disabled) 1`] = `
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -3378,8 +4116,68 @@ exports[`Storyshots props controls (disabled) 1`] = `
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
+}
+
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
+  display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
+}
+
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
+}
+
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -3387,15 +4185,17 @@ exports[`Storyshots props controls (disabled) 1`] = `
   -webkit-flex: 0 0 48px;
   -ms-flex: 0 0 48px;
   flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c10::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c10::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -3411,142 +4211,48 @@ exports[`Storyshots props controls (disabled) 1`] = `
   visibility: hidden;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
+.emotion-28 {
+  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;
+  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;
 }
 
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
+.emotion-30 {
+  opacity: 0.8;
+  height: 16px;
+  width: 75%;
   display: block;
+  background: #e1e8ed;
+  margin: 0 20px 0 0;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.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);
+.emotion-35 {
+  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;
@@ -3557,9 +4263,7 @@ exports[`Storyshots props controls (disabled) 1`] = `
   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;
@@ -3567,80 +4271,125 @@ exports[`Storyshots props controls (disabled) 1`] = `
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-  className="c0"
+  className="emotion-0 emotion-1"
 >
   <a
-    className="c1"
+    className="emotion-2 emotion-3"
     href="https://www.facebook.com/natgeo/videos/10156364216738951/"
   >
     https://www.facebook.com/natgeo/videos/10156364216738951/
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     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"
+      className="emotion-7 emotion-8 emotion-9 emotion-10"
     />
     <div
-      className="c6 microlink_card__content"
+      className="microlink_card__content emotion-11 emotion-12"
     >
       <span
-        className="c7"
+        className="emotion-13 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -3648,52 +4397,52 @@ exports[`Storyshots props controls (disabled) 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     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"
+      className="emotion-7 emotion-8 emotion-26 emotion-10"
     />
     <div
-      className="c11 microlink_card__content"
+      className="microlink_card__content emotion-28 emotion-12"
     >
       <span
-        className="c12"
+        className="emotion-30 emotion-14"
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c13 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-35 emotion-6"
     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"
+      className="emotion-7 emotion-8 emotion-39 emotion-10"
     />
     <div
-      className="c15 microlink_card__content"
+      className="microlink_card__content emotion-41 emotion-12"
     >
       <span
-        className="c16"
+        className="emotion-43 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -3701,7 +4450,7 @@ exports[`Storyshots props controls (disabled) 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
@@ -3709,80 +4458,143 @@ exports[`Storyshots props controls (disabled) 1`] = `
 `;
 
 exports[`Storyshots props default 1`] = `
-.c6 {
+@keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -3790,15 +4602,25 @@ exports[`Storyshots props default 1`] = `
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -3814,61 +4636,86 @@ exports[`Storyshots props default 1`] = `
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
   display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
   display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
 }
 
-.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;
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
   position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -3884,105 +4731,48 @@ exports[`Storyshots props default 1`] = `
   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;
+.emotion-28 {
+  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;
+  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;
 }
 
-.c12 {
+.emotion-30 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-35 {
+  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;
@@ -3993,9 +4783,7 @@ exports[`Storyshots props default 1`] = `
   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;
@@ -4003,80 +4791,125 @@ exports[`Storyshots props default 1`] = `
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-  className="c0"
+  className="emotion-0 emotion-1"
 >
   <a
-    className="c1"
+    className="emotion-2 emotion-3"
     href="https://www.apple.com/music/"
   >
     https://www.apple.com/music/
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="ltr"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-9 emotion-10"
     />
     <div
-      className="c6 microlink_card__content"
+      className="microlink_card__content emotion-11 emotion-12"
     >
       <span
-        className="c7"
+        className="emotion-13 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -4084,52 +4917,52 @@ exports[`Storyshots props default 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="ltr"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-26 emotion-10"
     />
     <div
-      className="c11 microlink_card__content"
+      className="microlink_card__content emotion-28 emotion-12"
     >
       <span
-        className="c12"
+        className="emotion-30 emotion-14"
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c13 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-35 emotion-6"
     direction="ltr"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-39 emotion-10"
     />
     <div
-      className="c15 microlink_card__content"
+      className="microlink_card__content emotion-41 emotion-12"
     >
       <span
-        className="c16"
+        className="emotion-43 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -4137,7 +4970,7 @@ exports[`Storyshots props default 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
@@ -4145,80 +4978,153 @@ exports[`Storyshots props default 1`] = `
 `;
 
 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;
+@keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
 }
 
-.c11 {
+.emotion-0 {
   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;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
+}
+
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+  transition-property: background,border-color;
+  will-change: background,border-color;
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:hover {
+  background-color: var(--microlink-hover-background-color, #f5f8fa);
+  border-color: var(--microlink-hover-border-color, #8899A680);
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -4226,15 +5132,25 @@ exports[`Storyshots props direction + contrast 1`] = `
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -4250,8 +5166,68 @@ exports[`Storyshots props direction + contrast 1`] = `
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
+}
+
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
+  display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
+}
+
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
+}
+
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -4259,15 +5235,17 @@ exports[`Storyshots props direction + contrast 1`] = `
   -webkit-flex: 0 0 48px;
   -ms-flex: 0 0 48px;
   flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c10::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c10::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -4283,8 +5261,93 @@ exports[`Storyshots props direction + contrast 1`] = `
   visibility: hidden;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-28 {
+  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;
+  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;
+}
+
+.emotion-30 {
+  opacity: 0.8;
+  height: 16px;
+  width: 75%;
+  display: block;
+  background: #e1e8ed;
+  margin: 0 20px 0 0;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
+}
+
+.emotion-35 {
+  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;
+  transition-duration: 150ms;
+  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;
+  transition-property: background,border-color;
+  will-change: background,border-color;
+}
+
+.emotion-35:active,
+.emotion-35:hover {
+  outline: 0;
+}
+
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:hover {
+  background-color: var(--microlink-hover-background-color, #f5f8fa);
+  border-color: var(--microlink-hover-border-color, #8899A680);
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -4292,19 +5355,21 @@ exports[`Storyshots props direction + contrast 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-39::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
+.emotion-39::before {
   padding-bottom: 0;
 }
 
-.c14::after {
+.emotion-39::after {
   content: '';
   position: absolute;
   left: 0;
@@ -4320,221 +5385,71 @@ exports[`Storyshots props direction + contrast 1`] = `
   visibility: hidden;
 }
 
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-.c7 {
+.emotion-43 {
   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);
-  }
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-  className="c0"
+  className="emotion-0 emotion-1"
 >
   <a
-    className="c1"
+    className="emotion-2 emotion-3"
     href="https://www.apple.com/music/"
   >
     https://www.apple.com/music/
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="rtl"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-9 emotion-10"
     />
     <div
-      className="c6 microlink_card__content"
+      className="microlink_card__content emotion-11 emotion-12"
     >
       <span
-        className="c7"
+        className="emotion-13 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -4542,52 +5457,52 @@ exports[`Storyshots props direction + contrast 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="rtl"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-26 emotion-10"
     />
     <div
-      className="c11 microlink_card__content"
+      className="microlink_card__content emotion-28 emotion-12"
     >
       <span
-        className="c12"
+        className="emotion-30 emotion-14"
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c13 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-35 emotion-6"
     direction="rtl"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-39 emotion-10"
     />
     <div
-      className="c15 microlink_card__content"
+      className="microlink_card__content emotion-41 emotion-12"
     >
       <span
-        className="c16"
+        className="emotion-43 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -4595,7 +5510,7 @@ exports[`Storyshots props direction + contrast 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
@@ -4603,80 +5518,146 @@ exports[`Storyshots props direction + contrast 1`] = `
 `;
 
 exports[`Storyshots props direction 1`] = `
-.c6 {
+@keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -4684,15 +5665,25 @@ exports[`Storyshots props direction 1`] = `
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -4708,178 +5699,143 @@ exports[`Storyshots props direction 1`] = `
   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;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-.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 {
+.emotion-13 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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 {
+.emotion-15 {
   opacity: 0.8;
   height: 14px;
   width: 95%;
   display: block;
   position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
   -webkit-animation-delay: 0.125s;
   animation-delay: 0.125s;
 }
 
-.c9 {
+.emotion-19 {
   opacity: 0.8;
   height: 12px;
   width: 30%;
   display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
+  display: block;
   overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
+  height: auto;
+  position: relative;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
+}
+
+.emotion-26::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
+}
+
+.emotion-26::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;
+}
+
+.emotion-28 {
   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;
+  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;
+  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;
 }
 
-.c2:active,
-.c2:hover {
-  outline: 0;
+.emotion-30 {
+  opacity: 0.8;
+  height: 16px;
+  width: 75%;
+  display: block;
+  background: #e1e8ed;
+  margin: 0 20px 0 0;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.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);
+.emotion-35 {
+  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;
@@ -4890,9 +5846,7 @@ exports[`Storyshots props direction 1`] = `
   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;
@@ -4903,80 +5857,125 @@ exports[`Storyshots props direction 1`] = `
   flex-direction: column-reverse;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-  className="c0"
+  className="emotion-0 emotion-1"
 >
   <a
-    className="c1"
+    className="emotion-2 emotion-3"
     href="https://www.apple.com/music/"
   >
     https://www.apple.com/music/
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="rtl"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-9 emotion-10"
     />
     <div
-      className="c6 microlink_card__content"
+      className="microlink_card__content emotion-11 emotion-12"
     >
       <span
-        className="c7"
+        className="emotion-13 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -4984,52 +5983,52 @@ exports[`Storyshots props direction 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="rtl"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-26 emotion-10"
     />
     <div
-      className="c11 microlink_card__content"
+      className="microlink_card__content emotion-28 emotion-12"
     >
       <span
-        className="c12"
+        className="emotion-30 emotion-14"
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c13 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-35 emotion-6"
     direction="rtl"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-39 emotion-10"
     />
     <div
-      className="c15 microlink_card__content"
+      className="microlink_card__content emotion-41 emotion-12"
     >
       <span
-        className="c16"
+        className="emotion-43 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -5037,7 +6036,7 @@ exports[`Storyshots props direction 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
@@ -5046,80 +6045,157 @@ exports[`Storyshots props direction 1`] = `
 
 exports[`Storyshots props lazy 1`] = `
 Array [
-  .c7 {
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
+}
+
+.emotion-4 {
+  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;
 }
 
-.c16 {
+.emotion-7 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-7:active,
+.emotion-7:hover {
+  outline: 0;
+}
+
+.emotion-7:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c5 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -5127,15 +6203,25 @@ Array [
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c5::before {
+.emotion-11::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c5::after {
+@media (max-width: 48em) {
+  .emotion-11 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-11::after {
   content: '';
   position: absolute;
   left: 0;
@@ -5151,61 +6237,86 @@ Array [
   visibility: hidden;
 }
 
-.c11 {
-  background: transparent no-repeat center center / cover;
+.emotion-13 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-15 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
   display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.c11::before {
-  content: '';
-  padding-bottom: 100%;
+.emotion-17 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
   display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
 }
 
-.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;
+.emotion-21 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
 }
 
-.c15 {
-  background: transparent no-repeat center center / cover;
+.emotion-28 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
   position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c15::before {
+.emotion-28::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c15::before {
-  padding-bottom: 0;
-}
-
-.c15::after {
+.emotion-28::after {
   content: '';
   position: absolute;
   left: 0;
@@ -5221,105 +6332,48 @@ Array [
   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;
+.emotion-30 {
+  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;
+  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;
 }
 
-.c13 {
+.emotion-32 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-37 {
+  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;
@@ -5330,9 +6384,7 @@ Array [
   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;
@@ -5340,76 +6392,107 @@ Array [
   height: 382px;
 }
 
-.c14:active,
-.c14:hover {
+.emotion-37:active,
+.emotion-37: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;
+@media (max-width: 48em) {
+  .emotion-37 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-37:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-41 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-41::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.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;
+.emotion-41::before {
+  padding-bottom: 0;
 }
 
-.c4:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-41::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;
 }
 
-@media (max-width:48em) {
-  .c5 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-43 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-@media (max-width:48em) {
-  .c14 {
-    height: calc(382px * 7/9);
-  }
+.emotion-45 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-    className="c0"
+    className="emotion-0 emotion-1"
   >
     <a
-      className="c1"
+      className="emotion-2 emotion-3"
       href="https://microlink.io"
     >
       https://microlink.io
     </a>
     <div>
       <pre
-        className="c2"
+        className="emotion-4 emotion-5"
       >
         {
   "lazy": false
@@ -5417,26 +6500,26 @@ Array [
       </pre>
     </div>
     <a
-      className="c3 microlink_card c4"
+      className="microlink_card  emotion-6 emotion-7 emotion-8"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
       target="_blank"
     >
       <div
-        className="c5 c6 microlink_card__media microlink_card__media_image"
+        className="emotion-9 emotion-10 emotion-11 emotion-12"
       />
       <div
-        className="c7 microlink_card__content"
+        className="microlink_card__content emotion-13 emotion-14"
       >
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c9"
+          className="emotion-17 emotion-18"
         />
         <span
-          className="c9"
+          className="emotion-17 emotion-18"
           style={
             Object {
               "marginBottom": "12px",
@@ -5444,52 +6527,52 @@ Array [
           }
         />
         <span
-          className="c10"
+          className="emotion-21 emotion-22"
         />
       </div>
     </a>
     <a
-      className="c3 microlink_card c4"
+      className="microlink_card  emotion-6 emotion-7 emotion-8"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
       target="_blank"
     >
       <div
-        className="c11 c6 microlink_card__media microlink_card__media_image"
+        className="emotion-9 emotion-10 emotion-28 emotion-12"
       />
       <div
-        className="c12 microlink_card__content"
+        className="microlink_card__content emotion-30 emotion-14"
       >
         <span
-          className="c13"
+          className="emotion-32 emotion-16"
         />
         <span
-          className="c10"
+          className="emotion-21 emotion-22"
         />
       </div>
     </a>
     <a
-      className="c14 microlink_card c4"
+      className="microlink_card  emotion-6 emotion-37 emotion-8"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
       target="_blank"
     >
       <div
-        className="c15 c6 microlink_card__media microlink_card__media_image"
+        className="emotion-9 emotion-10 emotion-41 emotion-12"
       />
       <div
-        className="c16 microlink_card__content"
+        className="microlink_card__content emotion-43 emotion-14"
       >
         <span
-          className="c17"
+          className="emotion-45 emotion-16"
         />
         <span
-          className="c9"
+          className="emotion-17 emotion-18"
         />
         <span
-          className="c9"
+          className="emotion-17 emotion-18"
           style={
             Object {
               "marginBottom": "12px",
@@ -5497,85 +6580,162 @@ Array [
           }
         />
         <span
-          className="c10"
+          className="emotion-21 emotion-22"
         />
       </div>
     </a>
   </div>,
-  .c7 {
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
+}
+
+.emotion-4 {
+  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;
 }
 
-.c16 {
+.emotion-7 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-7:active,
+.emotion-7:hover {
+  outline: 0;
+}
+
+.emotion-7:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c5 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -5583,15 +6743,25 @@ Array [
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c5::before {
+.emotion-11::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c5::after {
+@media (max-width: 48em) {
+  .emotion-11 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-11::after {
   content: '';
   position: absolute;
   left: 0;
@@ -5607,8 +6777,68 @@ Array [
   visibility: hidden;
 }
 
-.c11 {
-  background: transparent no-repeat center center / cover;
+.emotion-13 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-15 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
+}
+
+.emotion-17 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
+  display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
+}
+
+.emotion-21 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
+}
+
+.emotion-28 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -5616,15 +6846,17 @@ Array [
   -webkit-flex: 0 0 48px;
   -ms-flex: 0 0 48px;
   flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c11::before {
+.emotion-28::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c11::after {
+.emotion-28::after {
   content: '';
   position: absolute;
   left: 0;
@@ -5640,142 +6872,48 @@ Array [
   visibility: hidden;
 }
 
-.c15 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
+.emotion-30 {
+  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;
+  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::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 {
+.emotion-32 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-37 {
+  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;
@@ -5786,9 +6924,7 @@ Array [
   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;
@@ -5796,76 +6932,107 @@ Array [
   height: 382px;
 }
 
-.c14:active,
-.c14:hover {
+.emotion-37:active,
+.emotion-37: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;
+@media (max-width: 48em) {
+  .emotion-37 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-37:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-41 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-41::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.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;
+.emotion-41::before {
+  padding-bottom: 0;
 }
 
-.c4:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-41::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;
 }
 
-@media (max-width:48em) {
-  .c5 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-43 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-@media (max-width:48em) {
-  .c14 {
-    height: calc(382px * 7/9);
-  }
+.emotion-45 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-    className="c0"
+    className="emotion-0 emotion-1"
   >
     <a
-      className="c1"
+      className="emotion-2 emotion-3"
       href="https://microlink.io"
     >
       https://microlink.io
     </a>
     <div>
       <pre
-        className="c2"
+        className="emotion-4 emotion-5"
       >
         {
   "lazy": {
@@ -5875,26 +7042,26 @@ Array [
       </pre>
     </div>
     <a
-      className="c3 microlink_card c4"
+      className="microlink_card  emotion-6 emotion-7 emotion-8"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
       target="_blank"
     >
       <div
-        className="c5 c6 microlink_card__media microlink_card__media_image"
+        className="emotion-9 emotion-10 emotion-11 emotion-12"
       />
       <div
-        className="c7 microlink_card__content"
+        className="microlink_card__content emotion-13 emotion-14"
       >
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c9"
+          className="emotion-17 emotion-18"
         />
         <span
-          className="c9"
+          className="emotion-17 emotion-18"
           style={
             Object {
               "marginBottom": "12px",
@@ -5902,52 +7069,52 @@ Array [
           }
         />
         <span
-          className="c10"
+          className="emotion-21 emotion-22"
         />
       </div>
     </a>
     <a
-      className="c3 microlink_card c4"
+      className="microlink_card  emotion-6 emotion-7 emotion-8"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
       target="_blank"
     >
       <div
-        className="c11 c6 microlink_card__media microlink_card__media_image"
+        className="emotion-9 emotion-10 emotion-28 emotion-12"
       />
       <div
-        className="c12 microlink_card__content"
+        className="microlink_card__content emotion-30 emotion-14"
       >
         <span
-          className="c13"
+          className="emotion-32 emotion-16"
         />
         <span
-          className="c10"
+          className="emotion-21 emotion-22"
         />
       </div>
     </a>
     <a
-      className="c14 microlink_card c4"
+      className="microlink_card  emotion-6 emotion-37 emotion-8"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
       target="_blank"
     >
       <div
-        className="c15 c6 microlink_card__media microlink_card__media_image"
+        className="emotion-9 emotion-10 emotion-41 emotion-12"
       />
       <div
-        className="c16 microlink_card__content"
+        className="microlink_card__content emotion-43 emotion-14"
       >
         <span
-          className="c17"
+          className="emotion-45 emotion-16"
         />
         <span
-          className="c9"
+          className="emotion-17 emotion-18"
         />
         <span
-          className="c9"
+          className="emotion-17 emotion-18"
           style={
             Object {
               "marginBottom": "12px",
@@ -5955,7 +7122,7 @@ Array [
           }
         />
         <span
-          className="c10"
+          className="emotion-21 emotion-22"
         />
       </div>
     </a>
@@ -5964,80 +7131,143 @@ Array [
 `;
 
 exports[`Storyshots props loading 1`] = `
-.c6 {
+@keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
 }
 
-.c15 {
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
+}
+
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -6045,15 +7275,25 @@ exports[`Storyshots props loading 1`] = `
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -6069,61 +7309,86 @@ exports[`Storyshots props loading 1`] = `
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
   display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
   display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
 }
 
-.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;
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
   position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -6139,105 +7404,48 @@ exports[`Storyshots props loading 1`] = `
   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;
+.emotion-28 {
+  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;
+  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;
 }
 
-.c12 {
+.emotion-30 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-35 {
+  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;
@@ -6248,9 +7456,7 @@ exports[`Storyshots props loading 1`] = `
   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;
@@ -6258,80 +7464,125 @@ exports[`Storyshots props loading 1`] = `
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-  className="c0"
+  className="emotion-0 emotion-1"
 >
   <a
-    className="c1"
+    className="emotion-2 emotion-3"
     href="https://microlink.io"
   >
     https://microlink.io
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="ltr"
     href="https://microlink.io"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-9 emotion-10"
     />
     <div
-      className="c6 microlink_card__content"
+      className="microlink_card__content emotion-11 emotion-12"
     >
       <span
-        className="c7"
+        className="emotion-13 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -6339,52 +7590,52 @@ exports[`Storyshots props loading 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="ltr"
     href="https://microlink.io"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-26 emotion-10"
     />
     <div
-      className="c11 microlink_card__content"
+      className="microlink_card__content emotion-28 emotion-12"
     >
       <span
-        className="c12"
+        className="emotion-30 emotion-14"
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c13 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-35 emotion-6"
     direction="ltr"
     href="https://microlink.io"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-39 emotion-10"
     />
     <div
-      className="c15 microlink_card__content"
+      className="microlink_card__content emotion-41 emotion-12"
     >
       <span
-        className="c16"
+        className="emotion-43 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -6392,7 +7643,7 @@ exports[`Storyshots props loading 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
@@ -6400,80 +7651,143 @@ exports[`Storyshots props loading 1`] = `
 `;
 
 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;
+@keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
 }
 
-.c11 {
+.emotion-0 {
   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;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
+}
+
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -6481,15 +7795,25 @@ exports[`Storyshots props mediaRef 1`] = `
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -6505,8 +7829,68 @@ exports[`Storyshots props mediaRef 1`] = `
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
+}
+
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
+  display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
+}
+
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
+}
+
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -6514,15 +7898,17 @@ exports[`Storyshots props mediaRef 1`] = `
   -webkit-flex: 0 0 48px;
   -ms-flex: 0 0 48px;
   flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c10::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c10::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -6538,8 +7924,83 @@ exports[`Storyshots props mediaRef 1`] = `
   visibility: hidden;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-28 {
+  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;
+  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;
+}
+
+.emotion-30 {
+  opacity: 0.8;
+  height: 16px;
+  width: 75%;
+  display: block;
+  background: #e1e8ed;
+  margin: 0 20px 0 0;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
+}
+
+.emotion-35 {
+  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;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 382px;
+}
+
+.emotion-35:active,
+.emotion-35:hover {
+  outline: 0;
+}
+
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -6547,19 +8008,21 @@ exports[`Storyshots props mediaRef 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-39::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
+.emotion-39::before {
   padding-bottom: 0;
 }
 
-.c14::after {
+.emotion-39::after {
   content: '';
   position: absolute;
   left: 0;
@@ -6575,199 +8038,71 @@ exports[`Storyshots props mediaRef 1`] = `
   visibility: hidden;
 }
 
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-.c7 {
+.emotion-43 {
   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);
-  }
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-  className="c0"
+  className="emotion-0 emotion-1"
 >
   <a
-    className="c1"
+    className="emotion-2 emotion-3"
     href="https://www.facebook.com/natgeo/videos/10156364216738951/"
   >
     https://www.facebook.com/natgeo/videos/10156364216738951/
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     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"
+      className="emotion-7 emotion-8 emotion-9 emotion-10"
     />
     <div
-      className="c6 microlink_card__content"
+      className="microlink_card__content emotion-11 emotion-12"
     >
       <span
-        className="c7"
+        className="emotion-13 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -6775,52 +8110,52 @@ exports[`Storyshots props mediaRef 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     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"
+      className="emotion-7 emotion-8 emotion-26 emotion-10"
     />
     <div
-      className="c11 microlink_card__content"
+      className="microlink_card__content emotion-28 emotion-12"
     >
       <span
-        className="c12"
+        className="emotion-30 emotion-14"
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c13 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-35 emotion-6"
     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"
+      className="emotion-7 emotion-8 emotion-39 emotion-10"
     />
     <div
-      className="c15 microlink_card__content"
+      className="microlink_card__content emotion-41 emotion-12"
     >
       <span
-        className="c16"
+        className="emotion-43 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -6828,7 +8163,7 @@ exports[`Storyshots props mediaRef 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
@@ -6836,80 +8171,143 @@ exports[`Storyshots props mediaRef 1`] = `
 `;
 
 exports[`Storyshots setData function 1`] = `
-.c6 {
+@keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -6917,15 +8315,25 @@ exports[`Storyshots setData function 1`] = `
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -6941,61 +8349,86 @@ exports[`Storyshots setData function 1`] = `
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
   display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
   display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
 }
 
-.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;
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
   position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -7011,105 +8444,48 @@ exports[`Storyshots setData function 1`] = `
   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;
+.emotion-28 {
+  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;
+  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;
 }
 
-.c12 {
+.emotion-30 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-35 {
+  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;
@@ -7120,9 +8496,7 @@ exports[`Storyshots setData function 1`] = `
   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;
@@ -7130,80 +8504,125 @@ exports[`Storyshots setData function 1`] = `
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-  className="c0"
+  className="emotion-0 emotion-1"
 >
   <a
-    className="c1"
+    className="emotion-2 emotion-3"
     href="https://microlink.io"
   >
     https://microlink.io
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="ltr"
     href="https://microlink.io"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-9 emotion-10"
     />
     <div
-      className="c6 microlink_card__content"
+      className="microlink_card__content emotion-11 emotion-12"
     >
       <span
-        className="c7"
+        className="emotion-13 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -7211,52 +8630,52 @@ exports[`Storyshots setData function 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="ltr"
     href="https://microlink.io"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-26 emotion-10"
     />
     <div
-      className="c11 microlink_card__content"
+      className="microlink_card__content emotion-28 emotion-12"
     >
       <span
-        className="c12"
+        className="emotion-30 emotion-14"
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c13 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-35 emotion-6"
     direction="ltr"
     href="https://microlink.io"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-39 emotion-10"
     />
     <div
-      className="c15 microlink_card__content"
+      className="microlink_card__content emotion-41 emotion-12"
     >
       <span
-        className="c16"
+        className="emotion-43 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -7264,7 +8683,7 @@ exports[`Storyshots setData function 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
@@ -7272,80 +8691,143 @@ exports[`Storyshots setData function 1`] = `
 `;
 
 exports[`Storyshots setData object 1`] = `
-.c6 {
+@keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
+}
+
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c11 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
 }
 
-.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;
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -7353,15 +8835,25 @@ exports[`Storyshots setData object 1`] = `
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -7377,61 +8869,86 @@ exports[`Storyshots setData object 1`] = `
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
   display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
   display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
 }
 
-.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;
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
   position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -7447,105 +8964,48 @@ exports[`Storyshots setData object 1`] = `
   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;
+.emotion-28 {
+  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;
+  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;
 }
 
-.c12 {
+.emotion-30 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-35 {
+  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;
@@ -7556,9 +9016,7 @@ exports[`Storyshots setData object 1`] = `
   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;
@@ -7566,80 +9024,125 @@ exports[`Storyshots setData object 1`] = `
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-<div
-  className="c0"
->
-  <a
-    className="c1"
-    href="https://microlink.io"
-  >
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+}
+
+<div
+  className="emotion-0 emotion-1"
+>
+  <a
+    className="emotion-2 emotion-3"
+    href="https://microlink.io"
+  >
     https://microlink.io
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="ltr"
     href="https://microlink.io"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-9 emotion-10"
     />
     <div
-      className="c6 microlink_card__content"
+      className="microlink_card__content emotion-11 emotion-12"
     >
       <span
-        className="c7"
+        className="emotion-13 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -7647,52 +9150,52 @@ exports[`Storyshots setData object 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="ltr"
     href="https://microlink.io"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-26 emotion-10"
     />
     <div
-      className="c11 microlink_card__content"
+      className="microlink_card__content emotion-28 emotion-12"
     >
       <span
-        className="c12"
+        className="emotion-30 emotion-14"
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c13 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-35 emotion-6"
     direction="ltr"
     href="https://microlink.io"
     rel="noopener noreferrer"
     target="_blank"
   >
     <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-39 emotion-10"
     />
     <div
-      className="c15 microlink_card__content"
+      className="microlink_card__content emotion-41 emotion-12"
     >
       <span
-        className="c16"
+        className="emotion-43 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -7700,7 +9203,7 @@ exports[`Storyshots setData object 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
@@ -7709,32 +9212,143 @@ exports[`Storyshots setData object 1`] = `
 
 exports[`Storyshots setData prefer media 1`] = `
 Array [
-  .c6 {
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
+}
+
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
+}
+
+.emotion-5 {
+  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;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -7742,15 +9356,25 @@ Array [
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -7766,138 +9390,96 @@ Array [
   visibility: hidden;
 }
 
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-.c7 {
+.emotion-13 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
   height: 15px;
 }
 
-.c8 {
+.emotion-15 {
   opacity: 0.8;
   height: 14px;
   width: 95%;
   display: block;
   position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
   -webkit-animation-delay: 0.125s;
   animation-delay: 0.125s;
 }
 
-.c9 {
+.emotion-19 {
   opacity: 0.8;
   height: 12px;
   width: 30%;
   display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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"
+    className="emotion-0 emotion-1"
   >
     <a
-      className="c1"
+      className="emotion-2 emotion-3"
       href="https://youtube.com"
     >
       https://youtube.com
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://youtube.com"
       rel="noopener noreferrer"
       target="_blank"
     >
       <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-9 emotion-10"
       />
       <div
-        className="c6 microlink_card__content"
+        className="microlink_card__content emotion-11 emotion-12"
       >
         <span
-          className="c7"
+          className="emotion-13 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -7905,37 +9487,148 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
   </div>,
-  .c6 {
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
+}
+
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
+}
+
+.emotion-5 {
+  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;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -7943,17 +9636,27 @@ Array [
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
-  content: '';
-  position: absolute;
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
+  content: '';
+  position: absolute;
   left: 0;
   top: 0;
   right: 0;
@@ -7967,138 +9670,96 @@ Array [
   visibility: hidden;
 }
 
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-.c7 {
+.emotion-13 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
   height: 15px;
 }
 
-.c8 {
+.emotion-15 {
   opacity: 0.8;
   height: 14px;
   width: 95%;
   display: block;
   position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
   -webkit-animation-delay: 0.125s;
   animation-delay: 0.125s;
 }
 
-.c9 {
+.emotion-19 {
   opacity: 0.8;
   height: 12px;
   width: 30%;
   display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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"
+    className="emotion-0 emotion-1"
   >
     <a
-      className="c1"
+      className="emotion-2 emotion-3"
       href="https://example.com"
     >
       https://example.com
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://example.com"
       rel="noopener noreferrer"
       target="_blank"
     >
       <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-9 emotion-10"
       />
       <div
-        className="c6 microlink_card__content"
+        className="microlink_card__content emotion-11 emotion-12"
       >
         <span
-          className="c7"
+          className="emotion-13 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -8106,7 +9767,7 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
@@ -8116,80 +9777,143 @@ Array [
 
 exports[`Storyshots style border radius 1`] = `
 Array [
-  .c6 {
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
 }
 
-.c15 {
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
+}
+
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -8197,15 +9921,25 @@ Array [
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -8221,8 +9955,68 @@ Array [
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
+}
+
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
+  display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
+}
+
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
+}
+
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -8230,15 +10024,17 @@ Array [
   -webkit-flex: 0 0 48px;
   -ms-flex: 0 0 48px;
   flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c10::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c10::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -8254,142 +10050,48 @@ Array [
   visibility: hidden;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
+.emotion-28 {
+  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;
+  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;
 }
 
-.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 {
+.emotion-30 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-35 {
+  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;
@@ -8400,9 +10102,7 @@ Array [
   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;
@@ -8410,61 +10110,106 @@ Array [
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-    className="c0"
+    className="emotion-0 emotion-1"
   >
     <a
-      className="c1"
+      className="emotion-2 emotion-3"
       href="https://www.apple.com/music/"
     >
       https://www.apple.com/music/
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://www.apple.com/music/"
       rel="noopener noreferrer"
@@ -8477,19 +10222,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-9 emotion-10"
       />
       <div
-        className="c6 microlink_card__content"
+        className="microlink_card__content emotion-11 emotion-12"
       >
         <span
-          className="c7"
+          className="emotion-13 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -8497,12 +10242,12 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://www.apple.com/music/"
       rel="noopener noreferrer"
@@ -8515,21 +10260,21 @@ Array [
       target="_blank"
     >
       <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-26 emotion-10"
       />
       <div
-        className="c11 microlink_card__content"
+        className="microlink_card__content emotion-28 emotion-12"
       >
         <span
-          className="c12"
+          className="emotion-30 emotion-14"
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c13 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-35 emotion-6"
       direction="ltr"
       href="https://www.apple.com/music/"
       rel="noopener noreferrer"
@@ -8542,19 +10287,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-39 emotion-10"
       />
       <div
-        className="c15 microlink_card__content"
+        className="microlink_card__content emotion-41 emotion-12"
       >
         <span
-          className="c16"
+          className="emotion-43 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -8562,85 +10307,148 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
   </div>,
-  .c6 {
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -8648,15 +10456,25 @@ Array [
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -8672,61 +10490,86 @@ Array [
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
   display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
   display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
 }
 
-.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;
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
   position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -8742,105 +10585,48 @@ Array [
   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;
+.emotion-28 {
+  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;
+  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;
 }
 
-.c12 {
+.emotion-30 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-35 {
+  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;
@@ -8851,9 +10637,7 @@ Array [
   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;
@@ -8861,61 +10645,106 @@ Array [
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-    className="c0"
+    className="emotion-0 emotion-1"
   >
     <a
-      className="c1"
+      className="emotion-2 emotion-3"
       href="https://microlink.io"
     >
       https://microlink.io
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -8928,19 +10757,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-9 emotion-10"
       />
       <div
-        className="c6 microlink_card__content"
+        className="microlink_card__content emotion-11 emotion-12"
       >
         <span
-          className="c7"
+          className="emotion-13 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -8948,12 +10777,12 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -8966,21 +10795,21 @@ Array [
       target="_blank"
     >
       <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-26 emotion-10"
       />
       <div
-        className="c11 microlink_card__content"
+        className="microlink_card__content emotion-28 emotion-12"
       >
         <span
-          className="c12"
+          className="emotion-30 emotion-14"
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c13 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-35 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -8993,19 +10822,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-39 emotion-10"
       />
       <div
-        className="c15 microlink_card__content"
+        className="microlink_card__content emotion-41 emotion-12"
       >
         <span
-          className="c16"
+          className="emotion-43 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -9013,85 +10842,148 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </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;
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
 }
 
-.c11 {
+.emotion-0 {
   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;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
+}
+
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
 }
 
-.c15 {
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
+}
+
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -9099,15 +10991,25 @@ Array [
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -9123,8 +11025,68 @@ Array [
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
+}
+
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
+  display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
+}
+
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
+}
+
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -9132,15 +11094,17 @@ Array [
   -webkit-flex: 0 0 48px;
   -ms-flex: 0 0 48px;
   flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c10::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c10::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -9156,8 +11120,83 @@ Array [
   visibility: hidden;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-28 {
+  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;
+  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;
+}
+
+.emotion-30 {
+  opacity: 0.8;
+  height: 16px;
+  width: 75%;
+  display: block;
+  background: #e1e8ed;
+  margin: 0 20px 0 0;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
+}
+
+.emotion-35 {
+  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;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 382px;
+}
+
+.emotion-35:active,
+.emotion-35:hover {
+  outline: 0;
+}
+
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -9165,19 +11204,21 @@ Array [
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-39::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
+.emotion-39::before {
   padding-bottom: 0;
 }
 
-.c14::after {
+.emotion-39::after {
   content: '';
   position: absolute;
   left: 0;
@@ -9193,180 +11234,52 @@ Array [
   visibility: hidden;
 }
 
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-.c7 {
+.emotion-43 {
   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);
-  }
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-    className="c0"
+    className="emotion-0 emotion-1"
   >
     <a
-      className="c1"
+      className="emotion-2 emotion-3"
       href="https://microlink.io"
     >
       https://microlink.io
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -9379,19 +11292,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-9 emotion-10"
       />
       <div
-        className="c6 microlink_card__content"
+        className="microlink_card__content emotion-11 emotion-12"
       >
         <span
-          className="c7"
+          className="emotion-13 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -9399,12 +11312,12 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -9417,21 +11330,21 @@ Array [
       target="_blank"
     >
       <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-26 emotion-10"
       />
       <div
-        className="c11 microlink_card__content"
+        className="microlink_card__content emotion-28 emotion-12"
       >
         <span
-          className="c12"
+          className="emotion-30 emotion-14"
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c13 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-35 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -9444,19 +11357,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-39 emotion-10"
       />
       <div
-        className="c15 microlink_card__content"
+        className="microlink_card__content emotion-41 emotion-12"
       >
         <span
-          className="c16"
+          className="emotion-43 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -9464,7 +11377,7 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
@@ -9474,80 +11387,143 @@ Array [
 
 exports[`Storyshots style height 1`] = `
 Array [
-  .c6 {
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -9555,15 +11531,25 @@ Array [
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -9579,61 +11565,86 @@ Array [
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
   display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
   display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
 }
 
-.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;
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
   position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -9649,105 +11660,48 @@ Array [
   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;
+.emotion-28 {
+  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;
+  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;
 }
 
-.c12 {
+.emotion-30 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-35 {
+  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;
@@ -9758,9 +11712,7 @@ Array [
   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;
@@ -9768,61 +11720,106 @@ Array [
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-    className="c0"
+    className="emotion-0 emotion-1"
   >
     <a
-      className="c1"
+      className="emotion-2 emotion-3"
       href="https://www.apple.com/music/"
     >
       https://www.apple.com/music/
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://www.apple.com/music/"
       rel="noopener noreferrer"
@@ -9835,19 +11832,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-9 emotion-10"
       />
       <div
-        className="c6 microlink_card__content"
+        className="microlink_card__content emotion-11 emotion-12"
       >
         <span
-          className="c7"
+          className="emotion-13 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -9855,12 +11852,12 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://www.apple.com/music/"
       rel="noopener noreferrer"
@@ -9873,21 +11870,21 @@ Array [
       target="_blank"
     >
       <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-26 emotion-10"
       />
       <div
-        className="c11 microlink_card__content"
+        className="microlink_card__content emotion-28 emotion-12"
       >
         <span
-          className="c12"
+          className="emotion-30 emotion-14"
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c13 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-35 emotion-6"
       direction="ltr"
       href="https://www.apple.com/music/"
       rel="noopener noreferrer"
@@ -9900,19 +11897,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-39 emotion-10"
       />
       <div
-        className="c15 microlink_card__content"
+        className="microlink_card__content emotion-41 emotion-12"
       >
         <span
-          className="c16"
+          className="emotion-43 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -9920,85 +11917,148 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
   </div>,
-  .c6 {
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
+}
+
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c11 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
 }
 
-.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;
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -10006,15 +12066,25 @@ Array [
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -10030,61 +12100,86 @@ Array [
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
   display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
   display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
 }
 
-.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;
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
   position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -10100,105 +12195,48 @@ Array [
   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;
+.emotion-28 {
+  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;
+  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;
 }
 
-.c12 {
+.emotion-30 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-35 {
+  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;
@@ -10209,9 +12247,7 @@ Array [
   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;
@@ -10219,61 +12255,106 @@ Array [
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://microlink.io"
-    >
-      https://microlink.io
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+}
+
+<div
+    className="emotion-0 emotion-1"
+  >
+    <a
+      className="emotion-2 emotion-3"
+      href="https://microlink.io"
+    >
+      https://microlink.io
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -10286,19 +12367,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-9 emotion-10"
       />
       <div
-        className="c6 microlink_card__content"
+        className="microlink_card__content emotion-11 emotion-12"
       >
         <span
-          className="c7"
+          className="emotion-13 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -10306,12 +12387,12 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -10324,21 +12405,21 @@ Array [
       target="_blank"
     >
       <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-26 emotion-10"
       />
       <div
-        className="c11 microlink_card__content"
+        className="microlink_card__content emotion-28 emotion-12"
       >
         <span
-          className="c12"
+          className="emotion-30 emotion-14"
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c13 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-35 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -10351,19 +12432,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-39 emotion-10"
       />
       <div
-        className="c15 microlink_card__content"
+        className="microlink_card__content emotion-41 emotion-12"
       >
         <span
-          className="c16"
+          className="emotion-43 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -10371,85 +12452,148 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
   </div>,
-  .c6 {
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -10457,15 +12601,25 @@ Array [
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -10481,8 +12635,68 @@ Array [
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
+}
+
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
+  display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
+}
+
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
+}
+
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -10490,15 +12704,17 @@ Array [
   -webkit-flex: 0 0 48px;
   -ms-flex: 0 0 48px;
   flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c10::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c10::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -10514,8 +12730,83 @@ Array [
   visibility: hidden;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-28 {
+  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;
+  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;
+}
+
+.emotion-30 {
+  opacity: 0.8;
+  height: 16px;
+  width: 75%;
+  display: block;
+  background: #e1e8ed;
+  margin: 0 20px 0 0;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
+}
+
+.emotion-35 {
+  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;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 382px;
+}
+
+.emotion-35:active,
+.emotion-35:hover {
+  outline: 0;
+}
+
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -10523,19 +12814,21 @@ Array [
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-39::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
+.emotion-39::before {
   padding-bottom: 0;
 }
 
-.c14::after {
+.emotion-39::after {
   content: '';
   position: absolute;
   left: 0;
@@ -10551,180 +12844,52 @@ Array [
   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 {
+.emotion-41 {
   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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: space-around;
+  justify-content: space-around;
   -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;
-  }
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-    className="c0"
+    className="emotion-0 emotion-1"
   >
     <a
-      className="c1"
+      className="emotion-2 emotion-3"
       href="https://microlink.io"
     >
       https://microlink.io
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -10737,19 +12902,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-9 emotion-10"
       />
       <div
-        className="c6 microlink_card__content"
+        className="microlink_card__content emotion-11 emotion-12"
       >
         <span
-          className="c7"
+          className="emotion-13 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -10757,12 +12922,12 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -10775,21 +12940,21 @@ Array [
       target="_blank"
     >
       <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-26 emotion-10"
       />
       <div
-        className="c11 microlink_card__content"
+        className="microlink_card__content emotion-28 emotion-12"
       >
         <span
-          className="c12"
+          className="emotion-30 emotion-14"
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c13 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-35 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -10802,19 +12967,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-39 emotion-10"
       />
       <div
-        className="c15 microlink_card__content"
+        className="microlink_card__content emotion-41 emotion-12"
       >
         <span
-          className="c16"
+          className="emotion-43 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -10822,134 +12987,174 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
   </div>,
-  .c6 {
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
   position: relative;
-  -webkit-flex: 0 0 125px;
-  -ms-flex: 0 0 125px;
-  flex: 0 0 125px;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
 }
 
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
 }
 
-.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;
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  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;
+  -webkit-flex: 0 0 125px;
+  -ms-flex: 0 0 125px;
+  flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c10::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c10::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -10965,142 +13170,143 @@ Array [
   visibility: hidden;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-.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 {
+.emotion-13 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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 {
+.emotion-15 {
   opacity: 0.8;
   height: 14px;
   width: 95%;
   display: block;
   position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
   -webkit-animation-delay: 0.125s;
   animation-delay: 0.125s;
 }
 
-.c9 {
+.emotion-19 {
   opacity: 0.8;
   height: 12px;
   width: 30%;
   display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
+  display: block;
   overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
+  height: auto;
+  position: relative;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
+}
+
+.emotion-26::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
+}
+
+.emotion-26::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;
+}
+
+.emotion-28 {
   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);
+  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;
+  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;
 }
 
-.c2:active,
-.c2:hover {
-  outline: 0;
+.emotion-30 {
+  opacity: 0.8;
+  height: 16px;
+  width: 75%;
+  display: block;
+  background: #e1e8ed;
+  margin: 0 20px 0 0;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.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);
+.emotion-35 {
+  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;
@@ -11111,9 +13317,7 @@ Array [
   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;
@@ -11121,61 +13325,106 @@ Array [
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-    className="c0"
+    className="emotion-0 emotion-1"
   >
     <a
-      className="c1"
+      className="emotion-2 emotion-3"
       href="https://microlink.io"
     >
       https://microlink.io
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -11188,19 +13437,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-9 emotion-10"
       />
       <div
-        className="c6 microlink_card__content"
+        className="microlink_card__content emotion-11 emotion-12"
       >
         <span
-          className="c7"
+          className="emotion-13 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -11208,12 +13457,12 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -11226,21 +13475,21 @@ Array [
       target="_blank"
     >
       <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-26 emotion-10"
       />
       <div
-        className="c11 microlink_card__content"
+        className="microlink_card__content emotion-28 emotion-12"
       >
         <span
-          className="c12"
+          className="emotion-30 emotion-14"
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c13 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-35 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -11253,19 +13502,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-39 emotion-10"
       />
       <div
-        className="c15 microlink_card__content"
+        className="microlink_card__content emotion-41 emotion-12"
       >
         <span
-          className="c16"
+          className="emotion-43 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -11273,85 +13522,148 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
   </div>,
-  .c6 {
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -11359,15 +13671,25 @@ Array [
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -11383,61 +13705,86 @@ Array [
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
   display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
   display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
 }
 
-.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;
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
   position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -11453,105 +13800,48 @@ Array [
   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;
+.emotion-28 {
+  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;
+  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;
 }
 
-.c12 {
+.emotion-30 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-35 {
+  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;
@@ -11562,9 +13852,7 @@ Array [
   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;
@@ -11572,61 +13860,106 @@ Array [
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-35:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-39::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;
 }
 
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://microlink.io"
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+}
+
+<div
+    className="emotion-0 emotion-1"
+  >
+    <a
+      className="emotion-2 emotion-3"
+      href="https://microlink.io"
     >
       https://microlink.io
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -11639,19 +13972,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-9 emotion-10"
       />
       <div
-        className="c6 microlink_card__content"
+        className="microlink_card__content emotion-11 emotion-12"
       >
         <span
-          className="c7"
+          className="emotion-13 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -11659,12 +13992,12 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -11677,21 +14010,21 @@ Array [
       target="_blank"
     >
       <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-26 emotion-10"
       />
       <div
-        className="c11 microlink_card__content"
+        className="microlink_card__content emotion-28 emotion-12"
       >
         <span
-          className="c12"
+          className="emotion-30 emotion-14"
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c13 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-35 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -11704,19 +14037,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-39 emotion-10"
       />
       <div
-        className="c15 microlink_card__content"
+        className="microlink_card__content emotion-41 emotion-12"
       >
         <span
-          className="c16"
+          className="emotion-43 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -11724,85 +14057,148 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
   </div>,
-  .c6 {
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -11810,15 +14206,25 @@ Array [
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -11834,61 +14240,86 @@ Array [
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
   display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
   display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
 }
 
-.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;
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
   position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -11904,105 +14335,48 @@ Array [
   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;
+.emotion-28 {
+  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;
+  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;
 }
 
-.c12 {
+.emotion-30 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-35 {
+  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;
@@ -12013,9 +14387,7 @@ Array [
   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;
@@ -12023,61 +14395,106 @@ Array [
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-    className="c0"
+    className="emotion-0 emotion-1"
   >
     <a
-      className="c1"
+      className="emotion-2 emotion-3"
       href="https://microlink.io"
     >
       https://microlink.io
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -12090,19 +14507,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-9 emotion-10"
       />
       <div
-        className="c6 microlink_card__content"
+        className="microlink_card__content emotion-11 emotion-12"
       >
         <span
-          className="c7"
+          className="emotion-13 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -12110,12 +14527,12 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -12128,21 +14545,21 @@ Array [
       target="_blank"
     >
       <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-26 emotion-10"
       />
       <div
-        className="c11 microlink_card__content"
+        className="microlink_card__content emotion-28 emotion-12"
       >
         <span
-          className="c12"
+          className="emotion-30 emotion-14"
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c13 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-35 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -12155,19 +14572,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-39 emotion-10"
       />
       <div
-        className="c15 microlink_card__content"
+        className="microlink_card__content emotion-41 emotion-12"
       >
         <span
-          className="c16"
+          className="emotion-43 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -12175,7 +14592,7 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
@@ -12184,80 +14601,143 @@ Array [
 `;
 
 exports[`Storyshots style misc 1`] = `
-.c6 {
+@keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -12265,15 +14745,25 @@ exports[`Storyshots style misc 1`] = `
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -12289,175 +14779,143 @@ exports[`Storyshots style misc 1`] = `
   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;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-.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 {
+.emotion-13 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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 {
+.emotion-15 {
   opacity: 0.8;
   height: 14px;
   width: 95%;
   display: block;
   position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
   -webkit-animation-delay: 0.125s;
   animation-delay: 0.125s;
 }
 
-.c9 {
+.emotion-19 {
   opacity: 0.8;
   height: 12px;
   width: 30%;
   display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
+  display: block;
   overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
+  height: auto;
+  position: relative;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
+}
+
+.emotion-26::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
+}
+
+.emotion-26::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;
+}
+
+.emotion-28 {
   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);
+  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;
+  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;
 }
 
-.c2:active,
-.c2:hover {
-  outline: 0;
+.emotion-30 {
+  opacity: 0.8;
+  height: 16px;
+  width: 75%;
+  display: block;
+  background: #e1e8ed;
+  margin: 0 20px 0 0;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.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);
+.emotion-35 {
+  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;
@@ -12468,9 +14926,7 @@ exports[`Storyshots style misc 1`] = `
   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;
@@ -12478,61 +14934,106 @@ exports[`Storyshots style misc 1`] = `
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-  className="c0"
+  className="emotion-0 emotion-1"
 >
   <a
-    className="c1"
+    className="emotion-2 emotion-3"
     href="https://www.apple.com/music/"
   >
     https://www.apple.com/music/
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="ltr"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
@@ -12546,19 +15047,19 @@ exports[`Storyshots style misc 1`] = `
     target="_blank"
   >
     <div
-      className="c4 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-9 emotion-10"
     />
     <div
-      className="c6 microlink_card__content"
+      className="microlink_card__content emotion-11 emotion-12"
     >
       <span
-        className="c7"
+        className="emotion-13 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -12566,12 +15067,12 @@ exports[`Storyshots style misc 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c2 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-5 emotion-6"
     direction="ltr"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
@@ -12585,21 +15086,21 @@ exports[`Storyshots style misc 1`] = `
     target="_blank"
   >
     <div
-      className="c10 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-26 emotion-10"
     />
     <div
-      className="c11 microlink_card__content"
+      className="microlink_card__content emotion-28 emotion-12"
     >
       <span
-        className="c12"
+        className="emotion-30 emotion-14"
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
   <a
-    className="c13 microlink_card c3"
+    className="microlink_card  emotion-4 emotion-35 emotion-6"
     direction="ltr"
     href="https://www.apple.com/music/"
     rel="noopener noreferrer"
@@ -12613,19 +15114,19 @@ exports[`Storyshots style misc 1`] = `
     target="_blank"
   >
     <div
-      className="c14 c5 microlink_card__media microlink_card__media_image"
+      className="emotion-7 emotion-8 emotion-39 emotion-10"
     />
     <div
-      className="c15 microlink_card__content"
+      className="microlink_card__content emotion-41 emotion-12"
     >
       <span
-        className="c16"
+        className="emotion-43 emotion-14"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
       />
       <span
-        className="c8"
+        className="emotion-15 emotion-16"
         style={
           Object {
             "marginBottom": "12px",
@@ -12633,7 +15134,7 @@ exports[`Storyshots style misc 1`] = `
         }
       />
       <span
-        className="c9"
+        className="emotion-19 emotion-20"
       />
     </div>
   </a>
@@ -12642,80 +15143,143 @@ exports[`Storyshots style misc 1`] = `
 
 exports[`Storyshots style width 1`] = `
 Array [
-  .c6 {
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
 }
 
-.c15 {
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
+}
+
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
+}
+
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -12723,15 +15287,25 @@ Array [
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -12747,61 +15321,86 @@ Array [
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
   display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
-  -webkit-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
   display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
 }
 
-.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;
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
   position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
-  padding-bottom: 0;
-}
-
-.c14::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -12817,105 +15416,48 @@ Array [
   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;
+.emotion-28 {
+  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;
+  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;
 }
 
-.c12 {
+.emotion-30 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-35 {
+  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;
@@ -12926,9 +15468,7 @@ Array [
   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;
@@ -12936,61 +15476,106 @@ Array [
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
 }
 
-.c1 {
-  color: #0366d6;
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-<div
-    className="c0"
-  >
-    <a
-      className="c1"
-      href="https://www.apple.com/music/"
-    >
-      https://www.apple.com/music/
+.emotion-39::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;
+}
+
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+}
+
+<div
+    className="emotion-0 emotion-1"
+  >
+    <a
+      className="emotion-2 emotion-3"
+      href="https://www.apple.com/music/"
+    >
+      https://www.apple.com/music/
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://www.apple.com/music/"
       rel="noopener noreferrer"
@@ -13003,19 +15588,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-9 emotion-10"
       />
       <div
-        className="c6 microlink_card__content"
+        className="microlink_card__content emotion-11 emotion-12"
       >
         <span
-          className="c7"
+          className="emotion-13 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -13023,12 +15608,12 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://www.apple.com/music/"
       rel="noopener noreferrer"
@@ -13041,21 +15626,21 @@ Array [
       target="_blank"
     >
       <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-26 emotion-10"
       />
       <div
-        className="c11 microlink_card__content"
+        className="microlink_card__content emotion-28 emotion-12"
       >
         <span
-          className="c12"
+          className="emotion-30 emotion-14"
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c13 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-35 emotion-6"
       direction="ltr"
       href="https://www.apple.com/music/"
       rel="noopener noreferrer"
@@ -13068,19 +15653,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-39 emotion-10"
       />
       <div
-        className="c15 microlink_card__content"
+        className="microlink_card__content emotion-41 emotion-12"
       >
         <span
-          className="c16"
+          className="emotion-43 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -13088,85 +15673,148 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
   </div>,
-  .c6 {
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c15 {
+.emotion-5 {
+  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;
-  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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: 1;
+  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
 }
 
-.c4 {
-  background: transparent no-repeat center center / cover;
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
+}
+
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
+}
+
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -13174,15 +15822,25 @@ Array [
   -webkit-flex: 0 0 125px;
   -ms-flex: 0 0 125px;
   flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c4::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c4::after {
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
+}
+
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -13198,8 +15856,68 @@ Array [
   visibility: hidden;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-13 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
+}
+
+.emotion-15 {
+  opacity: 0.8;
+  height: 14px;
+  width: 95%;
+  display: block;
+  position: relative;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: 0.125s;
+  animation-delay: 0.125s;
+}
+
+.emotion-19 {
+  opacity: 0.8;
+  height: 12px;
+  width: 30%;
+  display: block;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  -webkit-animation-delay: .25s;
+  animation-delay: .25s;
+  height: 10px;
+}
+
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
@@ -13207,15 +15925,17 @@ Array [
   -webkit-flex: 0 0 48px;
   -ms-flex: 0 0 48px;
   flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c10::before {
+.emotion-26::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c10::after {
+.emotion-26::after {
   content: '';
   position: absolute;
   left: 0;
@@ -13231,142 +15951,48 @@ Array [
   visibility: hidden;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
-  display: block;
-  overflow: hidden;
-  height: auto;
-  position: relative;
+.emotion-28 {
+  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;
+  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;
 }
 
-.c14::before {
-  content: '';
-  padding-bottom: 100%;
+.emotion-30 {
+  opacity: 0.8;
+  height: 16px;
+  width: 75%;
   display: block;
+  background: #e1e8ed;
+  margin: 0 20px 0 0;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.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);
+.emotion-35 {
+  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;
@@ -13377,9 +16003,7 @@ Array [
   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;
@@ -13387,61 +16011,106 @@ Array [
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-    className="c0"
+    className="emotion-0 emotion-1"
   >
     <a
-      className="c1"
+      className="emotion-2 emotion-3"
       href="https://microlink.io"
     >
       https://microlink.io
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -13454,19 +16123,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-9 emotion-10"
       />
       <div
-        className="c6 microlink_card__content"
+        className="microlink_card__content emotion-11 emotion-12"
       >
         <span
-          className="c7"
+          className="emotion-13 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -13474,12 +16143,12 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -13492,21 +16161,21 @@ Array [
       target="_blank"
     >
       <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-26 emotion-10"
       />
       <div
-        className="c11 microlink_card__content"
+        className="microlink_card__content emotion-28 emotion-12"
       >
         <span
-          className="c12"
+          className="emotion-30 emotion-14"
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c13 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-35 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -13519,19 +16188,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-39 emotion-10"
       />
       <div
-        className="c15 microlink_card__content"
+        className="microlink_card__content emotion-41 emotion-12"
       >
         <span
-          className="c16"
+          className="emotion-43 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -13539,171 +16208,174 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </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;
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
 }
 
-.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;
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
 }
 
-.c15 {
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.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;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
 }
 
-.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;
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
+.emotion-5 {
+  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;
-  height: auto;
+  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-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
 }
 
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
 }
 
-.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;
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
   position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex: 0 0 125px;
+  -ms-flex: 0 0 125px;
+  flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
-  padding-bottom: 0;
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
 }
 
-.c14::after {
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -13719,105 +16391,143 @@ Array [
   visibility: hidden;
 }
 
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-.c7 {
+.emotion-13 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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 {
+.emotion-15 {
   opacity: 0.8;
   height: 14px;
   width: 95%;
   display: block;
   position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
   -webkit-animation-delay: 0.125s;
   animation-delay: 0.125s;
 }
 
-.c9 {
+.emotion-19 {
   opacity: 0.8;
   height: 12px;
   width: 30%;
   display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
+  display: block;
   overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
+  height: auto;
+  position: relative;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
+}
+
+.emotion-26::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
+}
+
+.emotion-26::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;
+}
+
+.emotion-28 {
   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);
+  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;
+  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;
 }
 
-.c2:active,
-.c2:hover {
-  outline: 0;
+.emotion-30 {
+  opacity: 0.8;
+  height: 16px;
+  width: 75%;
+  display: block;
+  background: #e1e8ed;
+  margin: 0 20px 0 0;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.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);
+.emotion-35 {
+  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;
@@ -13828,9 +16538,7 @@ Array [
   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;
@@ -13838,61 +16546,106 @@ Array [
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-    className="c0"
+    className="emotion-0 emotion-1"
   >
     <a
-      className="c1"
+      className="emotion-2 emotion-3"
       href="https://microlink.io"
     >
       https://microlink.io
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -13905,19 +16658,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-9 emotion-10"
       />
       <div
-        className="c6 microlink_card__content"
+        className="microlink_card__content emotion-11 emotion-12"
       >
         <span
-          className="c7"
+          className="emotion-13 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -13925,12 +16678,12 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -13943,21 +16696,21 @@ Array [
       target="_blank"
     >
       <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-26 emotion-10"
       />
       <div
-        className="c11 microlink_card__content"
+        className="microlink_card__content emotion-28 emotion-12"
       >
         <span
-          className="c12"
+          className="emotion-30 emotion-14"
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c13 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-35 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -13970,19 +16723,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-39 emotion-10"
       />
       <div
-        className="c15 microlink_card__content"
+        className="microlink_card__content emotion-41 emotion-12"
       >
         <span
-          className="c16"
+          className="emotion-43 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -13990,171 +16743,174 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </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;
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
 }
 
-.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;
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
 }
 
-.c15 {
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
 }
 
-.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;
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
+.emotion-5 {
+  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;
-  height: auto;
+  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-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
 }
 
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
 }
 
-.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;
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
   position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex: 0 0 125px;
+  -ms-flex: 0 0 125px;
+  flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
-  padding-bottom: 0;
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
 }
 
-.c14::after {
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -14170,105 +16926,143 @@ Array [
   visibility: hidden;
 }
 
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-.c7 {
+.emotion-13 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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 {
+.emotion-15 {
   opacity: 0.8;
   height: 14px;
   width: 95%;
   display: block;
   position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
   -webkit-animation-delay: 0.125s;
   animation-delay: 0.125s;
 }
 
-.c9 {
+.emotion-19 {
   opacity: 0.8;
   height: 12px;
   width: 30%;
   display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
+  display: block;
   overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
+  height: auto;
+  position: relative;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
+}
+
+.emotion-26::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
+}
+
+.emotion-26::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;
+}
+
+.emotion-28 {
   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);
+  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;
+  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;
 }
 
-.c2:active,
-.c2:hover {
-  outline: 0;
+.emotion-30 {
+  opacity: 0.8;
+  height: 16px;
+  width: 75%;
+  display: block;
+  background: #e1e8ed;
+  margin: 0 20px 0 0;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.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);
+.emotion-35 {
+  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;
@@ -14279,9 +17073,7 @@ Array [
   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;
@@ -14289,61 +17081,106 @@ Array [
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-    className="c0"
+    className="emotion-0 emotion-1"
   >
     <a
-      className="c1"
+      className="emotion-2 emotion-3"
       href="https://microlink.io"
     >
       https://microlink.io
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -14356,19 +17193,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-9 emotion-10"
       />
       <div
-        className="c6 microlink_card__content"
+        className="microlink_card__content emotion-11 emotion-12"
       >
         <span
-          className="c7"
+          className="emotion-13 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -14376,12 +17213,12 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -14394,21 +17231,21 @@ Array [
       target="_blank"
     >
       <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-26 emotion-10"
       />
       <div
-        className="c11 microlink_card__content"
+        className="microlink_card__content emotion-28 emotion-12"
       >
         <span
-          className="c12"
+          className="emotion-30 emotion-14"
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c13 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-35 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -14421,19 +17258,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-39 emotion-10"
       />
       <div
-        className="c15 microlink_card__content"
+        className="microlink_card__content emotion-41 emotion-12"
       >
         <span
-          className="c16"
+          className="emotion-43 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -14441,171 +17278,174 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </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;
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
 }
 
-.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;
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
 }
 
-.c15 {
+.emotion-0 {
   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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
 }
 
-.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;
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
+.emotion-5 {
+  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;
-  height: auto;
+  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-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
 }
 
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
 }
 
-.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;
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
   position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex: 0 0 125px;
+  -ms-flex: 0 0 125px;
+  flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
-  padding-bottom: 0;
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
 }
 
-.c14::after {
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -14617,109 +17457,147 @@ Array [
   -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;
+  opacity: 0;
+  visibility: hidden;
 }
 
-.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;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-.c16 {
+.emotion-13 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.c8 {
+.emotion-15 {
   opacity: 0.8;
   height: 14px;
   width: 95%;
   display: block;
   position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
   -webkit-animation-delay: 0.125s;
   animation-delay: 0.125s;
 }
 
-.c9 {
+.emotion-19 {
   opacity: 0.8;
   height: 12px;
   width: 30%;
   display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
+  display: block;
   overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
+  height: auto;
+  position: relative;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
+}
+
+.emotion-26::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
+}
+
+.emotion-26::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;
+}
+
+.emotion-28 {
   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);
+  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;
+  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;
 }
 
-.c2:active,
-.c2:hover {
-  outline: 0;
+.emotion-30 {
+  opacity: 0.8;
+  height: 16px;
+  width: 75%;
+  display: block;
+  background: #e1e8ed;
+  margin: 0 20px 0 0;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.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);
+.emotion-35 {
+  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;
@@ -14730,9 +17608,7 @@ Array [
   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;
@@ -14740,61 +17616,106 @@ Array [
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-    className="c0"
+    className="emotion-0 emotion-1"
   >
     <a
-      className="c1"
+      className="emotion-2 emotion-3"
       href="https://microlink.io"
     >
       https://microlink.io
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -14807,19 +17728,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-9 emotion-10"
       />
       <div
-        className="c6 microlink_card__content"
+        className="microlink_card__content emotion-11 emotion-12"
       >
         <span
-          className="c7"
+          className="emotion-13 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -14827,12 +17748,12 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -14845,21 +17766,21 @@ Array [
       target="_blank"
     >
       <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-26 emotion-10"
       />
       <div
-        className="c11 microlink_card__content"
+        className="microlink_card__content emotion-28 emotion-12"
       >
         <span
-          className="c12"
+          className="emotion-30 emotion-14"
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c13 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-35 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -14872,19 +17793,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-39 emotion-10"
       />
       <div
-        className="c15 microlink_card__content"
+        className="microlink_card__content emotion-41 emotion-12"
       >
         <span
-          className="c16"
+          className="emotion-43 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -14892,171 +17813,174 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </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;
+  @keyframes animation-0 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #dce3e8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
 }
 
-.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;
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
 }
 
-.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;
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+@keyframes animation-1 {
+  0% {
+    background: #e1e8ed;
+  }
+
+  70% {
+    background: #cdd4d8;
+  }
+
+  100% {
+    background: #e1e8ed;
+  }
+}
+
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   -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;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-.c4::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
+.emotion-0:not(:last-child):not(:only-child) {
+  border-bottom: 1px solid #e0e0e0;
 }
 
-.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;
+.emotion-2 {
+  color: #0366d6;
+  margin-bottom: 32px;
 }
 
-.c10 {
-  background: transparent no-repeat center center / cover;
-  display: block;
+.emotion-5 {
+  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;
-  height: auto;
+  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-flex: 0 0 48px;
-  -ms-flex: 0 0 48px;
-  flex: 0 0 48px;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(.25,.8,.25,1);
 }
 
-.c10::before {
-  content: '';
-  padding-bottom: 100%;
-  display: block;
+.emotion-5:active,
+.emotion-5:hover {
+  outline: 0;
 }
 
-.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;
+.emotion-5:not(:last-child):not(:only-child) {
+  margin-bottom: 32px;
 }
 
-.c14 {
-  background: transparent no-repeat center center / cover;
+.emotion-9 {
+  background: transparent no-repeat center center/cover;
   display: block;
   overflow: hidden;
   height: auto;
   position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex: 0 0 125px;
+  -ms-flex: 0 0 125px;
+  flex: 0 0 125px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c14::before {
+.emotion-9::before {
   content: '';
   padding-bottom: 100%;
   display: block;
 }
 
-.c14::before {
-  padding-bottom: 0;
+@media (max-width: 48em) {
+  .emotion-9 {
+    -webkit-flex: 0 0 92px;
+    -ms-flex: 0 0 92px;
+    flex: 0 0 92px;
+  }
 }
 
-.c14::after {
+.emotion-9::after {
   content: '';
   position: absolute;
   left: 0;
@@ -15072,105 +17996,143 @@ Array [
   visibility: hidden;
 }
 
-.c5 {
-  -webkit-animation: kHwByW 1.25s linear infinite;
-  animation: kHwByW 1.25s linear infinite;
+.emotion-11 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
 }
 
-.c7 {
+.emotion-13 {
   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;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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 {
+.emotion-15 {
   opacity: 0.8;
   height: 14px;
   width: 95%;
   display: block;
   position: relative;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
   -webkit-animation-delay: 0.125s;
   animation-delay: 0.125s;
 }
 
-.c9 {
+.emotion-19 {
   opacity: 0.8;
   height: 12px;
   width: 30%;
   display: block;
-  -webkit-animation: ibPKPZ .75s linear infinite;
-  animation: ibPKPZ .75s linear infinite;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .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);
+.emotion-26 {
+  background: transparent no-repeat center center/cover;
+  display: block;
   overflow: hidden;
-  font-family: InterUI,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;
+  height: auto;
+  position: relative;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
+}
+
+.emotion-26::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
+}
+
+.emotion-26::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;
+}
+
+.emotion-28 {
   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);
+  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;
+  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;
 }
 
-.c2:active,
-.c2:hover {
-  outline: 0;
+.emotion-30 {
+  opacity: 0.8;
+  height: 16px;
+  width: 75%;
+  display: block;
+  background: #e1e8ed;
+  margin: 0 20px 0 0;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
+  height: 15px;
 }
 
-.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);
+.emotion-35 {
+  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;
@@ -15181,9 +18143,7 @@ Array [
   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;
@@ -15191,61 +18151,106 @@ Array [
   height: 382px;
 }
 
-.c13:active,
-.c13:hover {
+.emotion-35:active,
+.emotion-35: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;
+@media (max-width: 48em) {
+  .emotion-35 {
+    height: calc(382px * 7/9);
+  }
+}
+
+.emotion-35:not(:last-child):not(:only-child) {
   margin-bottom: 32px;
 }
 
-.c0:not(:last-child):not(:only-child) {
-  border-bottom: 1px solid #e0e0e0;
+.emotion-39 {
+  background: transparent no-repeat center center/cover;
+  display: block;
+  overflow: hidden;
+  height: auto;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-animation: animation-0 1.25s linear infinite;
+  animation: animation-0 1.25s linear infinite;
 }
 
-.c1 {
-  color: #0366d6;
-  margin-bottom: 32px;
+.emotion-39::before {
+  content: '';
+  padding-bottom: 100%;
+  display: block;
 }
 
-.c3:not(:last-child):not(:only-child) {
-  margin-bottom: 32px;
+.emotion-39::before {
+  padding-bottom: 0;
 }
 
-@media (max-width:48em) {
-  .c4 {
-    -webkit-flex: 0 0 92px;
-    -ms-flex: 0 0 92px;
-    flex: 0 0 92px;
-  }
+.emotion-39::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;
 }
 
-@media (max-width:48em) {
-  .c13 {
-    height: calc(382px * 7/9);
-  }
+.emotion-41 {
+  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;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: 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;
+}
+
+.emotion-43 {
+  opacity: 0.8;
+  height: 16px;
+  width: 60%;
+  display: block;
+  background: #e1e8ed;
+  margin: 2px 0 8px;
+  -webkit-animation: animation-1 .75s linear infinite;
+  animation: animation-1 .75s linear infinite;
 }
 
 <div
-    className="c0"
+    className="emotion-0 emotion-1"
   >
     <a
-      className="c1"
+      className="emotion-2 emotion-3"
       href="https://microlink.io"
     >
       https://microlink.io
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -15258,19 +18263,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c4 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-9 emotion-10"
       />
       <div
-        className="c6 microlink_card__content"
+        className="microlink_card__content emotion-11 emotion-12"
       >
         <span
-          className="c7"
+          className="emotion-13 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -15278,12 +18283,12 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c2 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-5 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -15296,21 +18301,21 @@ Array [
       target="_blank"
     >
       <div
-        className="c10 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-26 emotion-10"
       />
       <div
-        className="c11 microlink_card__content"
+        className="microlink_card__content emotion-28 emotion-12"
       >
         <span
-          className="c12"
+          className="emotion-30 emotion-14"
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
     <a
-      className="c13 microlink_card c3"
+      className="microlink_card  emotion-4 emotion-35 emotion-6"
       direction="ltr"
       href="https://microlink.io"
       rel="noopener noreferrer"
@@ -15323,19 +18328,19 @@ Array [
       target="_blank"
     >
       <div
-        className="c14 c5 microlink_card__media microlink_card__media_image"
+        className="emotion-7 emotion-8 emotion-39 emotion-10"
       />
       <div
-        className="c15 microlink_card__content"
+        className="microlink_card__content emotion-41 emotion-12"
       >
         <span
-          className="c16"
+          className="emotion-43 emotion-14"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
         />
         <span
-          className="c8"
+          className="emotion-15 emotion-16"
           style={
             Object {
               "marginBottom": "12px",
@@ -15343,7 +18348,7 @@ Array [
           }
         />
         <span
-          className="c9"
+          className="emotion-19 emotion-20"
         />
       </div>
     </a>
diff --git a/packages/react/stories/createStoryEntry.js b/packages/react/stories/createStoryEntry.js
index 996ae9fb9..fcdbf6c54 100644
--- a/packages/react/stories/createStoryEntry.js
+++ b/packages/react/stories/createStoryEntry.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 
 import Microlink from '../src'
 
diff --git a/packages/react/stories/index.test.js b/packages/react/stories/index.test.js
index 85639ee02..de8a0bcc1 100644
--- a/packages/react/stories/index.test.js
+++ b/packages/react/stories/index.test.js
@@ -1,9 +1,10 @@
-/* global jest */
+/* global jest, expect */
 
 import initStoryshots from '@storybook/addon-storyshots'
 import { Headers, Request, Response } from 'node-fetch'
+import { createSerializer } from '@emotion/jest'
 
-import 'jest-styled-components'
+expect.addSnapshotSerializer(createSerializer())
 
 jest.mock('@microlink/mql', () =>
   require('@microlink/mql/' + require('@microlink/mql/package.json').browser)

From f74ed67f538fa06e46392f84e1268bc05810a913 Mon Sep 17 00:00:00 2001
From: Brad Adams <hi@breadadams.com>
Date: Wed, 10 May 2023 02:19:54 +0200
Subject: [PATCH 2/3] build: add emotion babel plugin

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

diff --git a/packages/react/package.json b/packages/react/package.json
index cf0f1d8af..a4bc8f0b5 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -37,6 +37,7 @@
     "@babel/preset-env": "latest",
     "@babel/preset-react": "latest",
     "@babel/runtime": "latest",
+    "@emotion/babel-plugin": "latest",
     "@emotion/jest": "latest",
     "@emotion/react": "latest",
     "@emotion/styled": "latest",

From 3132c60a0ffada285d7470fc38855e163dddd79c Mon Sep 17 00:00:00 2001
From: Brad Adams <hi@breadadams.com>
Date: Wed, 10 May 2023 02:50:31 +0200
Subject: [PATCH 3/3] feat: more `@emotion` migration

+ Update other packages to use `@emotion`
+ Update install instructions
---
 README.md                                       |  2 +-
 packages/hover-react/.babelrc                   |  3 ++-
 packages/hover-react/package.json               | 11 +++++++----
 packages/hover-react/rollup.config.js           |  3 ++-
 packages/hover-react/src/index.js               |  2 +-
 packages/hover-react/stories/index.js           |  2 +-
 packages/hover-react/stories/index.test.js      |  6 +++++-
 packages/hover-vanilla/docs/bootstrap.html      |  2 +-
 packages/hover-vanilla/docs/collectednotes.html |  2 +-
 packages/hover-vanilla/docs/dealflow.html       |  2 +-
 packages/hover-vanilla/docs/index.html          |  4 ++--
 packages/hover-vanilla/docs/joshwcomeau.html    |  2 +-
 packages/hover-vanilla/preact.html              |  4 ++--
 packages/hover-vanilla/rollup.config.js         |  3 ++-
 packages/hover-vanilla/src/index.js             |  2 +-
 packages/react/rollup.config.js                 |  2 +-
 packages/vanilla/index.html                     |  6 +++---
 packages/vanilla/preact.html                    |  4 ++--
 packages/vanilla/rollup.config.js               |  3 ++-
 19 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/README.md b/README.md
index a78feb9d7..5617da2f0 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@
 ### React
 
 ```
-npm install @microlink/react styled-components --save
+npm install @microlink/react @emotion/react @emotion/styled --save
 ```
 
 ### Vanilla
diff --git a/packages/hover-react/.babelrc b/packages/hover-react/.babelrc
index bc21ecb9c..5550e1a23 100644
--- a/packages/hover-react/.babelrc
+++ b/packages/hover-react/.babelrc
@@ -16,7 +16,8 @@
   ],
   "plugins": [
     "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-object-rest-spread"
+    "@babel/plugin-proposal-object-rest-spread",
+    "@emotion"
   ],
   "env": {
     "production": {
diff --git a/packages/hover-react/package.json b/packages/hover-react/package.json
index 9cc16585c..b790420da 100644
--- a/packages/hover-react/package.json
+++ b/packages/hover-react/package.json
@@ -36,6 +36,10 @@
     "@babel/preset-env": "latest",
     "@babel/preset-react": "latest",
     "@babel/runtime": "latest",
+    "@emotion/babel-plugin": "latest",
+    "@emotion/jest": "latest",
+    "@emotion/react": "latest",
+    "@emotion/styled": "latest",
     "@microlink/demo-links": "latest",
     "@rollup/plugin-babel": "latest",
     "@rollup/plugin-commonjs": "latest",
@@ -57,7 +61,6 @@
     "jest": "26",
     "jest-environment-enzyme": "latest",
     "jest-enzyme": "latest",
-    "jest-styled-components": "latest",
     "lodash": "latest",
     "prop-types": "latest",
     "react": "^17",
@@ -65,7 +68,6 @@
     "rollup": "latest",
     "rollup-plugin-filesize": "latest",
     "rollup-plugin-visualizer": "latest",
-    "styled-components": "latest",
     "unfetch": "latest"
   },
   "engines": {
@@ -91,9 +93,10 @@
     "verbose": true
   },
   "peerDependencies": {
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
     "react": ">= 17",
-    "react-dom": ">= 17",
-    "styled-components": "^5"
+    "react-dom": ">= 17"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/hover-react/rollup.config.js b/packages/hover-react/rollup.config.js
index a7b718764..805a4b41b 100644
--- a/packages/hover-react/rollup.config.js
+++ b/packages/hover-react/rollup.config.js
@@ -12,7 +12,8 @@ const babelRc = JSON.parse(fs.readFileSync('./.babelrc'))
 const globals = {
   react: 'React',
   'react-dom': 'ReactDOM',
-  'styled-components': 'styled',
+  '@emotion/react': 'emotionReact',
+  '@emotion/styled': 'emotionStyled',
   '@microlink/mql': 'mql'
 }
 
diff --git a/packages/hover-react/src/index.js b/packages/hover-react/src/index.js
index d24189bf6..2f4395128 100644
--- a/packages/hover-react/src/index.js
+++ b/packages/hover-react/src/index.js
@@ -1,5 +1,5 @@
 import Microlink from '@microlink/react'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 import React from 'react'
 
 const PopOver = styled.div`
diff --git a/packages/hover-react/stories/index.js b/packages/hover-react/stories/index.js
index 85db2f8fe..e000495fd 100644
--- a/packages/hover-react/stories/index.js
+++ b/packages/hover-react/stories/index.js
@@ -1,6 +1,6 @@
 import 'unfetch/polyfill'
 import React from 'react'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 
 import { storiesOf } from '@storybook/react'
 
diff --git a/packages/hover-react/stories/index.test.js b/packages/hover-react/stories/index.test.js
index 8363fd9cd..eec010a6c 100644
--- a/packages/hover-react/stories/index.test.js
+++ b/packages/hover-react/stories/index.test.js
@@ -1,4 +1,8 @@
+/* global expect */
+
 import initStoryshots from '@storybook/addon-storyshots'
-import 'jest-styled-components'
+import { createSerializer } from '@emotion/jest'
+
+expect.addSnapshotSerializer(createSerializer())
 
 initStoryshots()
diff --git a/packages/hover-vanilla/docs/bootstrap.html b/packages/hover-vanilla/docs/bootstrap.html
index 06cfb963e..bd05f1325 100644
--- a/packages/hover-vanilla/docs/bootstrap.html
+++ b/packages/hover-vanilla/docs/bootstrap.html
@@ -489,7 +489,7 @@ <h2 class="display-5 font-weight-normal">Official Themes</h2>
 
 </body>
 <script
-  src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
+  src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/@emotion/styled@11.11.0/dist/emotion-styled.cjs.min.js,npm/@emotion/react@11.11.0/dist/emotion-react.cjs.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
 <script src="./dist/microlink.js"></script>
 <script>
   document.addEventListener('DOMContentLoaded', function (event) {
diff --git a/packages/hover-vanilla/docs/collectednotes.html b/packages/hover-vanilla/docs/collectednotes.html
index a829f9872..cb46d558f 100644
--- a/packages/hover-vanilla/docs/collectednotes.html
+++ b/packages/hover-vanilla/docs/collectednotes.html
@@ -332,7 +332,7 @@ <h3 class="title is-size-4">Christian Gill</h3>
       --microlink-hover-border-color: #999;
     }
    </style>
-   <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
+   <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/@emotion/styled@11.11.0/dist/emotion-styled.cjs.min.js,npm/@emotion/react@11.11.0/dist/emotion-react.cjs.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
    <script src="./dist/microlink.js"></script>
    <script>
       document.addEventListener('DOMContentLoaded', function (event) {
diff --git a/packages/hover-vanilla/docs/dealflow.html b/packages/hover-vanilla/docs/dealflow.html
index a413decdd..82a80418c 100644
--- a/packages/hover-vanilla/docs/dealflow.html
+++ b/packages/hover-vanilla/docs/dealflow.html
@@ -194,7 +194,7 @@ <h1><b>Ontruck raised &euro;17m</b>. The Hotels Network received €10m. Bootstr
 <link rel="stylesheet" property="stylesheet" href="/modules/system/assets/css/framework.extras.css">
 
     <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.eu01.nr-data.net","licenseKey":"e39de2683f","applicationID":"14124675","transactionName":"MhBSZQoZC0ZXVRZZWwtacVIMEQpbGXUPQ2gmGVFCCx0WaXVbEXNbCwFCXhQUAEd2RBde","queueTime":0,"applicationTime":104,"atts":"HldRE0IDGEg=","errorBeacon":"bam.eu01.nr-data.net","agent":""}</script></body>
-    <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/@emotion/styled@11.11.0/dist/emotion-styled.cjs.min.js,npm/@emotion/react@11.11.0/dist/emotion-react.cjs.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
   <script src="./dist/microlink.js"></script>
   <style>
     :root {
diff --git a/packages/hover-vanilla/docs/index.html b/packages/hover-vanilla/docs/index.html
index 41a15b4de..3b7f3cd02 100644
--- a/packages/hover-vanilla/docs/index.html
+++ b/packages/hover-vanilla/docs/index.html
@@ -130,7 +130,7 @@ <h3 class="mt3 f3 fw6">Usage</h3>
   &#x3C;/style&#x3E;
 
   <span class="gray">&#x3C;!-- load @microlink/hover-vanilla --&#x3E;</span>
-  &lt;script src=&quot;https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js,npm/@microlink/hover-vanilla@latest/dist/microlink.min.js&quot;&gt;&lt;/script&gt;
+  &lt;script src=&quot;https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/@emotion/styled@11.11.0/dist/emotion-styled.cjs.min.js,npm/@emotion/react@11.11.0/dist/emotion-react.cjs.min.js,npm/@microlink/mql@latest/dist/mql.min.js,npm/@microlink/hover-vanilla@latest/dist/microlink.min.js&quot;&gt;&lt;/script&gt;
 
   <span class="gray">&#x3C;!-- intialize `microlinkHover` --&#x3E;</span>
   &#x3C;script&#x3E;
@@ -152,7 +152,7 @@ <h3 class="mt3 f3 fw6">See in action</h3>
     </p>
   </section>
 </body>
-<script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
+<script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/@emotion/styled@11.11.0/dist/emotion-styled.cjs.min.js,npm/@emotion/react@11.11.0/dist/emotion-react.cjs.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
 <script src="./dist/microlink.js"></script>
 <script>
   document.addEventListener('DOMContentLoaded', function (event) {
diff --git a/packages/hover-vanilla/docs/joshwcomeau.html b/packages/hover-vanilla/docs/joshwcomeau.html
index 6d08027e3..04af8d750 100644
--- a/packages/hover-vanilla/docs/joshwcomeau.html
+++ b/packages/hover-vanilla/docs/joshwcomeau.html
@@ -423,7 +423,7 @@
       --microlink-hover-border-color: #999;
     }
   </style>
-  <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/@emotion/styled@11.11.0/dist/emotion-styled.cjs.min.js,npm/@emotion/react@11.11.0/dist/emotion-react.cjs.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
   <script src="./dist/microlink.js"></script>
   <script>
     document.addEventListener('DOMContentLoaded', function (event) {
diff --git a/packages/hover-vanilla/preact.html b/packages/hover-vanilla/preact.html
index 6b8130459..e8135a316 100644
--- a/packages/hover-vanilla/preact.html
+++ b/packages/hover-vanilla/preact.html
@@ -120,8 +120,8 @@ <h1 class="f4 black tc">custom</h1>
 <script src="https://cdn.jsdelivr.net/npm/preact@10.3.1/hooks/dist/hooks.umd.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/preact@10.3.1/compat/dist/compat.umd.min.js"></script>
 <script>window.React = window.ReactDOM = window.preactCompat</script>
-<script src="https://cdn.jsdelivr.net/npm/react-is@latest/umd/react-is.production.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/styled-components@latest/dist/styled-components.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@emotion/styled@11.11.0/dist/emotion-styled.cjs.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@emotion/react@11.11.0/dist/emotion-react.cjs.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@microlink/mql@latest/dist/mql.min.js"></script>
 <script src="./dist/microlink.min.js"></script>
 <script>
diff --git a/packages/hover-vanilla/rollup.config.js b/packages/hover-vanilla/rollup.config.js
index 9f9e91139..2414a4ac2 100644
--- a/packages/hover-vanilla/rollup.config.js
+++ b/packages/hover-vanilla/rollup.config.js
@@ -31,7 +31,8 @@ const plugins = ({ compress }) =>
 const globals = {
   react: 'React',
   'react-dom': 'ReactDOM',
-  'styled-components': 'styled',
+  '@emotion/react': 'emotionReact',
+  '@emotion/styled': 'emotionStyled',
   '@microlink/mql': 'mql'
 }
 
diff --git a/packages/hover-vanilla/src/index.js b/packages/hover-vanilla/src/index.js
index 5a810859a..7e8a5e00d 100644
--- a/packages/hover-vanilla/src/index.js
+++ b/packages/hover-vanilla/src/index.js
@@ -1,6 +1,6 @@
 import MicrolinkHover from '@microlink/hover-react'
 import localhostUrl from 'localhost-url-regex'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 import ReactDOM from 'react-dom'
 import React from 'react'
 
diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js
index 46874ad68..805a4b41b 100644
--- a/packages/react/rollup.config.js
+++ b/packages/react/rollup.config.js
@@ -12,8 +12,8 @@ const babelRc = JSON.parse(fs.readFileSync('./.babelrc'))
 const globals = {
   react: 'React',
   'react-dom': 'ReactDOM',
-  '@emotion/styled': 'emotionStyled',
   '@emotion/react': 'emotionReact',
+  '@emotion/styled': 'emotionStyled',
   '@microlink/mql': 'mql'
 }
 
diff --git a/packages/vanilla/index.html b/packages/vanilla/index.html
index 9a55e297f..886705709 100644
--- a/packages/vanilla/index.html
+++ b/packages/vanilla/index.html
@@ -90,13 +90,13 @@ <h1 class="f4 black tc">custom</h1>
       </section>
     </article>
   </body>
-  <script src="https://cdn.jsdelivr.net/npm/react-is@latest/umd/react-is.production.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/react@16/umd/react.production.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/styled-components@latest/dist/styled-components.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@emotion/styled@11.11.0/dist/emotion-styled.cjs.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@emotion/react@11.11.0/dist/emotion-react.cjs.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@microlink/mql@latest/dist/mql.min.js"></script>
   <!-- one line script! -->
-  <!-- <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script> -->
+  <!-- <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/@emotion/styled@11.11.0/dist/emotion-styled.cjs.min.js,npm/@emotion/react@11.11.0/dist/emotion-react.cjs.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script> -->
   <script src="./dist/microlink.min.js"></script>
   <script>
     document.addEventListener("DOMContentLoaded", function (event) {
diff --git a/packages/vanilla/preact.html b/packages/vanilla/preact.html
index 523dd47ce..6185b274e 100644
--- a/packages/vanilla/preact.html
+++ b/packages/vanilla/preact.html
@@ -120,8 +120,8 @@ <h1 class="f4 black tc">custom</h1>
 <script src="https://cdn.jsdelivr.net/npm/preact@10.3.1/hooks/dist/hooks.umd.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/preact@10.3.1/compat/dist/compat.umd.min.js"></script>
 <script>window.React = window.ReactDOM = window.preactCompat</script>
-<script src="https://cdn.jsdelivr.net/npm/react-is@latest/umd/react-is.production.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/styled-components@latest/dist/styled-components.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@emotion/styled@11.11.0/dist/emotion-styled.cjs.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@emotion/react@11.11.0/dist/emotion-react.cjs.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@microlink/mql@latest/dist/mql.min.js"></script>
 <script src="./dist/microlink.min.js"></script>
 <script>
diff --git a/packages/vanilla/rollup.config.js b/packages/vanilla/rollup.config.js
index a734b7553..2a72c6812 100644
--- a/packages/vanilla/rollup.config.js
+++ b/packages/vanilla/rollup.config.js
@@ -23,7 +23,8 @@ const plugins = ({ compress }) => [
 const globals = {
   react: 'React',
   'react-dom': 'ReactDOM',
-  'styled-components': 'styled',
+  '@emotion/react': 'emotionReact',
+  '@emotion/styled': 'emotionStyled',
   '@microlink/mql': 'mql'
 }