From 5b1059882b1f4735ae5fccfad235cadc2fee5a29 Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Thu, 14 Sep 2017 17:50:22 +0100
Subject: [PATCH] feat(my-joyent): add group filtering

---
 .vscode/launch.json                           |    15 +
 packages/my-joyent/.eslintrc                  |     3 +-
 packages/my-joyent/package.json               |    10 +-
 .../__snapshots__/filters.spec.js.snap        |   881 +-
 .../src/components/filters/filters.js         |   108 +-
 .../__tests__/__snapshots__/home.spec.js.snap |    18 +
 .../my-joyent/src/components/home/home.js     |    30 +-
 .../__snapshots__/header.spec.js.snap         |    77 +-
 .../__snapshots__/not-found.spec.js.snap      |   211 +-
 .../__snapshots__/section-nav.spec.js.snap    |   116 +-
 .../__snapshots__/index.spec.js.snap          |   831 +-
 .../my-joyent/src/components/package/index.js |    12 +-
 .../__tests__/__snapshots__/list.spec.js.snap |  6949 +----
 .../my-joyent/src/components/packages/list.js |     5 +-
 .../my-joyent/src/components/sliders/index.js |    65 +
 .../__snapshots__/index.spec.js.snap          | 23883 +---------------
 .../my-joyent/src/containers/home/index.js    |    11 +-
 .../__snapshots__/header.spec.js.snap         |    77 +-
 .../__snapshots__/index.spec.js.snap          | 20773 +-------------
 packages/my-joyent/src/state/actions.js       |    14 +-
 packages/my-joyent/src/state/filterReducer.js |    24 +-
 packages/my-joyent/src/state/state.js         |     8 +-
 packages/my-joyent/test/mocks/filters.js      |     8 +-
 packages/ui-toolkit/src/button/index.js       |    10 +-
 packages/ui-toolkit/src/card/card.js          |     5 +-
 packages/ui-toolkit/src/message/index.js      |     7 +-
 26 files changed, 2266 insertions(+), 51885 deletions(-)
 create mode 100644 .vscode/launch.json
 create mode 100644 packages/my-joyent/src/components/sliders/index.js

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 00000000..f1c47b88
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3069/",
+            "webRoot": "${workspaceRoot}"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/my-joyent/.eslintrc b/packages/my-joyent/.eslintrc
index a847796a..2390a96a 100644
--- a/packages/my-joyent/.eslintrc
+++ b/packages/my-joyent/.eslintrc
@@ -6,6 +6,7 @@
     // temp
     "no-undef": 1,
     "no-debugger": 1,
-    "no-negated-condition": 0
+    "no-negated-condition": 0,
+    "jsx-a11y/href-no-hash": 0
   }
 }
diff --git a/packages/my-joyent/package.json b/packages/my-joyent/package.json
index e613fa61..66073b41 100644
--- a/packages/my-joyent/package.json
+++ b/packages/my-joyent/package.json
@@ -5,20 +5,17 @@
   "repository": "github:yldio/joyent-portal",
   "main": "build/",
   "scripts": {
-    "dev":
-      "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http react-scripts start",
+    "dev": "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http react-scripts start",
     "start": "PORT=3069 react-scripts start",
     "build": "NODE_ENV=production react-scripts build",
     "lint:css": "stylelint './src/**/*.js'",
     "lint:js": "eslint . --fix",
     "lint": "redrun -s lint:*",
     "lint-ci:css": "stylelint './src/**/*.js'",
-    "lint-ci:js":
-      "eslint . --format junit --output-file $CIRCLE_TEST_REPORTS/lint/cp-frontend.xml",
+    "lint-ci:js": "eslint . --format junit --output-file $CIRCLE_TEST_REPORTS/lint/cp-frontend.xml",
     "lint-ci": "redrun -p lint-ci:*",
     "test": "NODE_ENV=test ./test/run --env=jsdom",
-    "test-ci":
-      "echo 0 `# NODE_ENV=test JEST_JUNIT_OUTPUT=$CIRCLE_TEST_REPORTS/test/cp-frontend.xml ./test/run --env=jsdom --coverage --coverageDirectory=$CIRCLE_ARTIFACTS/cp-frontend --testResultsProcessor=$(node -e \"console.log(require.resolve('jest-junit'))\")`",
+    "test-ci": "echo 0 `# NODE_ENV=test JEST_JUNIT_OUTPUT=$CIRCLE_TEST_REPORTS/test/cp-frontend.xml ./test/run --env=jsdom --coverage --coverageDirectory=$CIRCLE_ARTIFACTS/cp-frontend --testResultsProcessor=$(node -e \"console.log(require.resolve('jest-junit'))\")`",
     "prepublish": "node scripts/postinstall"
   },
   "dependencies": {
@@ -26,6 +23,7 @@
     "graphql-tag": "^2.4.2",
     "jest-cli": "^21.0.1",
     "joyent-ui-toolkit": "^2.0.0",
+    "lodash.isequal": "^4.5.0",
     "normalized-styled-components": "^1.0.9",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
diff --git a/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap b/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
index a51f5efc..1683d372 100644
--- a/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
+++ b/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
@@ -1,13 +1,179 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Filters /> without throwing 1`] = `
-.c0 {
+.c6 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
   box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  font-weight: 600;
+  padding: 0.5625rem 1.125rem;
+  font-weight: 600;
+}
+
+.c6::-moz-focus-inner,
+.c6[type='button']::-moz-focus-inner,
+.c6[type='reset']::-moz-focus-inner,
+.c6[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c6:-moz-focusring,
+.c6[type='button']:-moz-focusring,
+.c6[type='reset']:-moz-focusring,
+.c6[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c6:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c6:hover {
+  border: solid 0.0625rem;
+}
+
+.c6:active,
+.c6:active:hover,
+.c6:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c6[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c6 + button {
+  margin-left: 1.25rem;
+}
+
+.c7 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  padding: 0.5625rem 1.125rem;
+  font-weight: 600;
+}
+
+.c7::-moz-focus-inner,
+.c7[type='button']::-moz-focus-inner,
+.c7[type='reset']::-moz-focus-inner,
+.c7[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c7:-moz-focusring,
+.c7[type='button']:-moz-focusring,
+.c7[type='reset']:-moz-focusring,
+.c7[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c7:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c7:hover {
+  border: solid 0.0625rem;
+}
+
+.c7:active,
+.c7:active:hover,
+.c7:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c7[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c7 + button {
+  margin-left: 1.25rem;
 }
 
 .c1 {
@@ -17,7 +183,6 @@ exports[`renders <Filters /> without throwing 1`] = `
   font-style: normal;
   font-stretch: normal;
   display: block;
-  color: ;
   margin-right: 0.75rem;
   font-weight: bold;
 }
@@ -114,7 +279,6 @@ exports[`renders <Filters /> without throwing 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  width: 100%;
 }
 
 .c2 > div {
@@ -127,278 +291,40 @@ exports[`renders <Filters /> without throwing 1`] = `
   margin-right: 2.25rem;
 }
 
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-basis: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-    display: block;
-  }
-}
-
-<div
-  className="c0"
->
-  .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-<label
-    className="c0"
-    htmlFor=""
-  >
-    Choose a package
-  </label>
-  .c3 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c1 .input-range {
-  position: relative;
-  width: calc(100% - 18px);
-  margin: auto;
-  min-height: 0.625rem;
-}
-
-.c1 .slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #FFFFFF;
-  border: 2px solid #bdbdbd;
-  border-radius: 50%;
-  cursor: pointer;
-  display: block;
-  height: 0.875rem;
-  width: 0.875rem;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  outline: none;
-  position: absolute;
-  top: 50%;
-  margin-top: 0.125rem;
-}
-
-.c1 .slider::active {
-  -webkit-transform: scale(1.3);
-  -ms-transform: scale(1.3);
-  transform: scale(1.3);
-}
-
-.c1 .slider::focus {
-  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
-}
-
-.c1 .disabled .track {
-  background: #D8D8D8;
-}
-
-.c1 .disabled .slider {
-  background: #CCC;
-  border: 1px solid #CCC;
-  box-shadow: none;
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.c1 .min,
-.c1 .max {
-  display: none;
-}
-
-.c1 .value {
-  top: 0.5rem;
-  position: absolute;
-}
-
-.c1 .value .label-container {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: #464646;
-  left: -50%;
-  position: relative;
-}
-
-.c1 .track {
-  background: #D8D8D8;
-  cursor: pointer;
-  display: block;
-  height: 0.25rem;
-  position: relative;
-}
-
-.c1 .active-track {
-  background: #364ACD;
-  height: 100%;
-  position: absolute;
-}
-
-.c2 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-.c0 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
   width: 100%;
-}
-
-.c0 > div {
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-}
-
-.c0 > div:not(:last-child) {
-  margin-right: 2.25rem;
-}
-
-<section
-    className="c0"
-  >
-    .c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 .input-range {
-  position: relative;
-  width: calc(100% - 18px);
-  margin: auto;
-  min-height: 0.625rem;
-}
-
-.c0 .slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #FFFFFF;
-  border: 2px solid #bdbdbd;
-  border-radius: 50%;
-  cursor: pointer;
-  display: block;
-  height: 0.875rem;
-  width: 0.875rem;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  outline: none;
-  position: absolute;
-  top: 50%;
-  margin-top: 0.125rem;
-}
-
-.c0 .slider::active {
-  -webkit-transform: scale(1.3);
-  -ms-transform: scale(1.3);
-  transform: scale(1.3);
-}
-
-.c0 .slider::focus {
-  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
-}
-
-.c0 .disabled .track {
-  background: #D8D8D8;
-}
-
-.c0 .disabled .slider {
-  background: #CCC;
-  border: 1px solid #CCC;
-  box-shadow: none;
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.c0 .min,
-.c0 .max {
-  display: none;
-}
-
-.c0 .value {
-  top: 0.5rem;
-  position: absolute;
-}
-
-.c0 .value .label-container {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: #464646;
-  left: -50%;
-  position: relative;
-}
-
-.c0 .track {
-  background: #D8D8D8;
-  cursor: pointer;
-  display: block;
-  height: 0.25rem;
-  position: relative;
-}
-
-.c0 .active-track {
-  background: #364ACD;
-  height: 100%;
-  position: absolute;
-}
-
-.c1 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<div
-      className="c0"
-    >
-      .c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
+  margin-top: 2.25rem;
 }
 
 .c0 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
+  width: 100%;
 }
 
-<label
-        className="c0 c1"
+<section
+  className="c0"
+>
+  <label
+    className="c1"
+    htmlFor=""
+  >
+    Choose a package
+  </label>
+  <section
+    className="c2"
+  >
+    <div
+      className="c3"
+    >
+      <label
+        className="c4 c1"
         htmlFor=""
       >
         GB RAM
@@ -512,127 +438,11 @@ exports[`renders <Filters /> without throwing 1`] = `
         </span>
       </div>
     </div>
-    .c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 .input-range {
-  position: relative;
-  width: calc(100% - 18px);
-  margin: auto;
-  min-height: 0.625rem;
-}
-
-.c0 .slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #FFFFFF;
-  border: 2px solid #bdbdbd;
-  border-radius: 50%;
-  cursor: pointer;
-  display: block;
-  height: 0.875rem;
-  width: 0.875rem;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  outline: none;
-  position: absolute;
-  top: 50%;
-  margin-top: 0.125rem;
-}
-
-.c0 .slider::active {
-  -webkit-transform: scale(1.3);
-  -ms-transform: scale(1.3);
-  transform: scale(1.3);
-}
-
-.c0 .slider::focus {
-  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
-}
-
-.c0 .disabled .track {
-  background: #D8D8D8;
-}
-
-.c0 .disabled .slider {
-  background: #CCC;
-  border: 1px solid #CCC;
-  box-shadow: none;
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.c0 .min,
-.c0 .max {
-  display: none;
-}
-
-.c0 .value {
-  top: 0.5rem;
-  position: absolute;
-}
-
-.c0 .value .label-container {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: #464646;
-  left: -50%;
-  position: relative;
-}
-
-.c0 .track {
-  background: #D8D8D8;
-  cursor: pointer;
-  display: block;
-  height: 0.25rem;
-  position: relative;
-}
-
-.c0 .active-track {
-  background: #364ACD;
-  height: 100%;
-  position: absolute;
-}
-
-.c1 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<div
-      className="c0"
+    <div
+      className="c3"
     >
-      .c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<label
-        className="c0 c1"
+      <label
+        className="c4 c1"
         htmlFor=""
       >
         vCPUs
@@ -746,127 +556,11 @@ exports[`renders <Filters /> without throwing 1`] = `
         </span>
       </div>
     </div>
-    .c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 .input-range {
-  position: relative;
-  width: calc(100% - 18px);
-  margin: auto;
-  min-height: 0.625rem;
-}
-
-.c0 .slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #FFFFFF;
-  border: 2px solid #bdbdbd;
-  border-radius: 50%;
-  cursor: pointer;
-  display: block;
-  height: 0.875rem;
-  width: 0.875rem;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  outline: none;
-  position: absolute;
-  top: 50%;
-  margin-top: 0.125rem;
-}
-
-.c0 .slider::active {
-  -webkit-transform: scale(1.3);
-  -ms-transform: scale(1.3);
-  transform: scale(1.3);
-}
-
-.c0 .slider::focus {
-  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
-}
-
-.c0 .disabled .track {
-  background: #D8D8D8;
-}
-
-.c0 .disabled .slider {
-  background: #CCC;
-  border: 1px solid #CCC;
-  box-shadow: none;
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.c0 .min,
-.c0 .max {
-  display: none;
-}
-
-.c0 .value {
-  top: 0.5rem;
-  position: absolute;
-}
-
-.c0 .value .label-container {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: #464646;
-  left: -50%;
-  position: relative;
-}
-
-.c0 .track {
-  background: #D8D8D8;
-  cursor: pointer;
-  display: block;
-  height: 0.25rem;
-  position: relative;
-}
-
-.c0 .active-track {
-  background: #364ACD;
-  height: 100%;
-  position: absolute;
-}
-
-.c1 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<div
-      className="c0"
+    <div
+      className="c3"
     >
-      .c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<label
-        className="c0 c1"
+      <label
+        className="c4 c1"
         htmlFor=""
       >
         TB Disk
@@ -980,127 +674,11 @@ exports[`renders <Filters /> without throwing 1`] = `
         </span>
       </div>
     </div>
-    .c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 .input-range {
-  position: relative;
-  width: calc(100% - 18px);
-  margin: auto;
-  min-height: 0.625rem;
-}
-
-.c0 .slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #FFFFFF;
-  border: 2px solid #bdbdbd;
-  border-radius: 50%;
-  cursor: pointer;
-  display: block;
-  height: 0.875rem;
-  width: 0.875rem;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  outline: none;
-  position: absolute;
-  top: 50%;
-  margin-top: 0.125rem;
-}
-
-.c0 .slider::active {
-  -webkit-transform: scale(1.3);
-  -ms-transform: scale(1.3);
-  transform: scale(1.3);
-}
-
-.c0 .slider::focus {
-  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
-}
-
-.c0 .disabled .track {
-  background: #D8D8D8;
-}
-
-.c0 .disabled .slider {
-  background: #CCC;
-  border: 1px solid #CCC;
-  box-shadow: none;
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.c0 .min,
-.c0 .max {
-  display: none;
-}
-
-.c0 .value {
-  top: 0.5rem;
-  position: absolute;
-}
-
-.c0 .value .label-container {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: #464646;
-  left: -50%;
-  position: relative;
-}
-
-.c0 .track {
-  background: #D8D8D8;
-  cursor: pointer;
-  display: block;
-  height: 0.25rem;
-  position: relative;
-}
-
-.c0 .active-track {
-  background: #364ACD;
-  height: 100%;
-  position: absolute;
-}
-
-.c1 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<div
-      className="c0"
+    <div
+      className="c3"
     >
-      .c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<label
-        className="c0 c1"
+      <label
+        className="c4 c1"
         htmlFor=""
       >
         $/hr
@@ -1215,5 +793,46 @@ exports[`renders <Filters /> without throwing 1`] = `
       </div>
     </div>
   </section>
-</div>
+  <section
+    className="c5"
+  >
+    <div>
+      <button
+        className="c6"
+        onClick={[Function]}
+        selected={false}
+      >
+        Compute Optimized
+      </button>
+      <button
+        className="c6"
+        onClick={[Function]}
+        selected={false}
+      >
+        Memory Optimized
+      </button>
+      <button
+        className="c6"
+        onClick={[Function]}
+        selected={false}
+      >
+        General Purpose
+      </button>
+      <button
+        className="c6"
+        onClick={[Function]}
+        selected={false}
+      >
+        Storage Optimized
+      </button>
+    </div>
+    <button
+      className="c7"
+      disabled={false}
+      onClick={undefined}
+    >
+      Reset Filters
+    </button>
+  </section>
+</section>
 `;
diff --git a/packages/my-joyent/src/components/filters/filters.js b/packages/my-joyent/src/components/filters/filters.js
index 63f5b61a..def3628e 100644
--- a/packages/my-joyent/src/components/filters/filters.js
+++ b/packages/my-joyent/src/components/filters/filters.js
@@ -1,72 +1,66 @@
 import React from 'react';
-import { Col } from 'react-styled-flexboxgrid';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
-import { Slider, FormLabel } from 'joyent-ui-toolkit';
+import isEqual from 'lodash.isequal';
+import { FormLabel, Button } from 'joyent-ui-toolkit';
+import { default as defaultState } from '@state/state';
 
-const FilterWrapper = styled.section`
+import Sliders from '@components/sliders';
+
+const GroupWrapper = styled.section`
   display: flex;
+  justify-content: space-between;
   width: 100%;
+  margin-top: ${remcalc(36)};
+`;
 
-  > div {
-    flex-grow: 1;
-
-    &:not(:last-child) {
-      margin-right: ${remcalc(36)};
-    }
-  }
+const Wrapper = styled.section`
+  /* Comment for prettier */
+  width: 100%;
 `;
 
 const Filters = ({
-  filters: { cpu, cost, ram, disk },
+  filters,
   ramSliderChange,
   cpuSliderChange,
   diskSliderChange,
-  costSliderChange
-}) => {
-  return (
-    <Col xs={12}>
-      <FormLabel>Choose a package</FormLabel>
-      <FilterWrapper>
-        <Slider
-          minValue={ram.min}
-          maxValue={ram.max}
-          step={0.256}
-          value={ram}
-          onChangeComplete={value => ramSliderChange(value)}
-        >
-          GB RAM
-        </Slider>
-        <Slider
-          minValue={cpu.min}
-          maxValue={cpu.max}
-          step={0.25}
-          value={cpu}
-          onChangeComplete={value => cpuSliderChange(value)}
-        >
-          vCPUs
-        </Slider>
-        <Slider
-          minValue={disk.min}
-          maxValue={disk.max}
-          step={0.01}
-          value={disk}
-          onChangeComplete={value => diskSliderChange(value)}
-        >
-          TB Disk
-        </Slider>
-        <Slider
-          minValue={cost.min}
-          maxValue={cost.max}
-          step={0.02}
-          value={cost}
-          onChangeComplete={value => costSliderChange(value)}
-        >
-          $/hr
-        </Slider>
-      </FilterWrapper>
-    </Col>
-  );
-};
+  costSliderChange,
+  groupChange,
+  filterReset
+}) => (
+  <Wrapper>
+    <FormLabel>Choose a package</FormLabel>
+    <Sliders
+      filters={filters}
+      ramSliderChange={ramSliderChange}
+      cpuSliderChange={cpuSliderChange}
+      diskSliderChange={diskSliderChange}
+      costSliderChange={costSliderChange}
+    />
+    <GroupWrapper>
+      <div>
+        {filters.groups.map(group => (
+          <Button
+            key={group.name}
+            tertiary
+            small
+            selected={group.selected}
+            onClick={() => groupChange(group)}
+          >
+            {group.name}
+          </Button>
+        ))}
+      </div>
+      <Button
+        disabled={isEqual(filters,defaultState.filters)}
+        secondary
+        small
+        onClick={filterReset}
+      >
+        Reset Filters
+      </Button>
+    </GroupWrapper>
+  </Wrapper>
+);
 
 export default Filters;
diff --git a/packages/my-joyent/src/components/home/__tests__/__snapshots__/home.spec.js.snap b/packages/my-joyent/src/components/home/__tests__/__snapshots__/home.spec.js.snap
index c8a68949..8c6698fa 100644
--- a/packages/my-joyent/src/components/home/__tests__/__snapshots__/home.spec.js.snap
+++ b/packages/my-joyent/src/components/home/__tests__/__snapshots__/home.spec.js.snap
@@ -17,6 +17,24 @@ exports[`renders <Home /> without throwing 1`] = `
           "max": 107.26,
           "min": 0.01,
         },
+        "groups": Array [
+          Object {
+            "name": "Compute Optimized",
+            "selected": false,
+          },
+          Object {
+            "name": "Memory Optimized",
+            "selected": false,
+          },
+          Object {
+            "name": "General Purpose",
+            "selected": false,
+          },
+          Object {
+            "name": "Storage Optimized",
+            "selected": false,
+          },
+        ],
         "ram": Object {
           "max": 50.688,
           "min": 0.256,
diff --git a/packages/my-joyent/src/components/home/home.js b/packages/my-joyent/src/components/home/home.js
index 73d2d599..6112a20b 100644
--- a/packages/my-joyent/src/components/home/home.js
+++ b/packages/my-joyent/src/components/home/home.js
@@ -15,6 +15,7 @@ class Home extends Component {
 
     this.closeMessage = this.closeMessage.bind(this);
     this.changeValue = this.changeValue.bind(this);
+    this.changeGroup = this.changeGroup.bind(this);
   }
 
   closeMessage() {
@@ -24,26 +25,37 @@ class Home extends Component {
   }
 
   changeValue(key, value) {
-    const { filters } = this.props;
-    this.props.onFilterChange({
+    const { filters, onFilterChange } = this.props;
+    onFilterChange({
       ...filters,
       [key]: value
     });
   }
 
+  changeGroup(group) {
+    const { filters, onFilterChange } = this.props;
+    const otherGroups = filters.groups.filter(g => g.name !== group.name);
+
+    onFilterChange({
+      ...filters,
+      groups: [
+        ...otherGroups,
+      { name: group.name, selected: !group.selected }
+      ]
+    });
+  }
+
   render() {
     const { showMessage } = this.state;
-    const { filters } = this.props;
+    const { filters, onFilterReset } = this.props;
     const _msg = showMessage ? (
       <Message
         title="Choosing deployement data center"
         onCloseClick={this.closeMessage}
       >
-        <p>
-          Not all data centres have all configurations of instances available.
-          Make sure that you choose the data center that suits your
-          requirements. <Anchor href="#">Learn More</Anchor>
-        </p>
+        Not all data centres have all configurations of instances available.
+        Make sure that you choose the data center that suits your requirements.{' '}
+        <Anchor href="#">Learn More</Anchor>
       </Message>
     ) : null;
 
@@ -58,6 +70,8 @@ class Home extends Component {
         <Row>
           <Filters
             filters={filters}
+            filterReset={onFilterReset}
+            groupChange={group => this.changeGroup(group)}
             ramSliderChange={value => this.changeValue('ram', value)}
             cpuSliderChange={value => this.changeValue('cpu', value)}
             diskSliderChange={value => this.changeValue('disk', value)}
diff --git a/packages/my-joyent/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap b/packages/my-joyent/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap
index 2d040e98..ff3c6ec7 100644
--- a/packages/my-joyent/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap
+++ b/packages/my-joyent/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap
@@ -6,7 +6,6 @@ exports[`renders <Header /> without throwing 1`] = `
   font-weight: 500;
   font-size: 1.5rem;
   text-transform: uppercase;
-  color: ;
   font-size: 1.8125rem;
   margin: 0;
 }
@@ -35,9 +34,9 @@ exports[`renders <Header /> without throwing 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
-  -webkit-box-pack: space-between;
+  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: space-between;
+  -ms-flex-pack: justify;
   justify-content: space-between;
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
@@ -46,7 +45,6 @@ exports[`renders <Header /> without throwing 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  background-color: ;
   max-height: 3.3125rem;
   min-height: 3.3125rem;
   padding: 0 1.125rem;
@@ -62,75 +60,18 @@ exports[`renders <Header /> without throwing 1`] = `
 <div
   className="c0"
 >
-  .c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 1.5rem;
-  text-transform: uppercase;
-  color: ;
-  font-size: 1.8125rem;
-  margin: 0;
-}
-
-.c0 {
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  padding: 0.9375rem 0;
-}
-
-.c2 {
-  border-style: none;
-  width: 5.4375rem;
-  height: 1.5625rem;
-}
-
-<div
-    className="c0"
+  <div
+    className="c1"
   >
-    .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 1.5rem;
-  text-transform: uppercase;
-  color: ;
-  font-size: 1.8125rem;
-  margin: 0;
-}
-
-.c1 {
-  border-style: none;
-  width: 5.4375rem;
-  height: 1.5625rem;
-}
-
-<h2
-      className="c0"
+    <h2
+      className="c2"
     >
-      .c0 {
-  border-style: none;
-  width: 5.4375rem;
-  height: 1.5625rem;
-}
-
-<a
+      <a
         href="/"
         onClick={[Function]}
       >
-        .c0 {
-  border-style: none;
-  width: 5.4375rem;
-  height: 1.5625rem;
-}
-
-<img
-          className="c0"
+        <img
+          className="c3"
           src="test-file-mock"
         />
       </a>
diff --git a/packages/my-joyent/src/components/navigation/__tests__/__snapshots__/not-found.spec.js.snap b/packages/my-joyent/src/components/navigation/__tests__/__snapshots__/not-found.spec.js.snap
index c2c3cfeb..4c0f744b 100644
--- a/packages/my-joyent/src/components/navigation/__tests__/__snapshots__/not-found.spec.js.snap
+++ b/packages/my-joyent/src/components/navigation/__tests__/__snapshots__/not-found.spec.js.snap
@@ -32,9 +32,7 @@ exports[`renders <NotFound /> without throwing 1`] = `
   vertical-align: middle;
   touch-action: manipulation;
   cursor: pointer;
-  color: ;
   background-image: none;
-  background-color: ;
   border-radius: 0.25rem;
   border: solid 0.0625rem;
 }
@@ -42,12 +40,9 @@ exports[`renders <NotFound /> without throwing 1`] = `
 .c6:focus {
   outline: 0;
   text-decoration: none;
-  background-color: ;
-  border-color: ;
 }
 
 .c6:hover {
-  background-color: ;
   border: solid 0.0625rem;
 }
 
@@ -56,8 +51,6 @@ exports[`renders <NotFound /> without throwing 1`] = `
 .c6:active:focus {
   background-image: none;
   outline: 0;
-  background-color: ;
-  border-color: ;
 }
 
 .c6[disabled] {
@@ -131,209 +124,21 @@ exports[`renders <NotFound /> without throwing 1`] = `
 <div
   className="c0"
 >
-  .c5 {
-  display: inline-block;
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 0;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: ;
-  background-image: none;
-  background-color: ;
-  border-radius: 0.25rem;
-  border: solid 0.0625rem;
-}
-
-.c5:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: ;
-  border-color: ;
-}
-
-.c5:hover {
-  background-color: ;
-  border: solid 0.0625rem;
-}
-
-.c5:active,
-.c5:active:hover,
-.c5:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: ;
-  border-color: ;
-}
-
-.c5[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c2 {
-  font-size: 2rem;
-  margin: 0.625rem 0;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 2.25rem;
-  font-style: normal;
-  font-stretch: normal;
-  margin: 0;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c0 {
-  margin-top: 3.75rem;
-}
-
-.c1 {
-  font-weight: normal;
-  font-size: 2rem;
-}
-
-.c3 {
-  margin-bottom: 1.875rem;
-  max-width: 30.625rem;
-}
-
-<div
-    className="c0"
+  <div
+    className="c1"
   >
-    .c1 {
-  font-size: 2rem;
-  margin: 0.625rem 0;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 2.25rem;
-  font-style: normal;
-  font-stretch: normal;
-  margin: 0;
-}
-
-.c0 {
-  font-weight: normal;
-  font-size: 2rem;
-}
-
-<h1
-      className="c0 c1"
+    <h1
+      className="c2 c3"
     >
       I have no memory of this place
     </h1>
-    .c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c0 {
-  margin-bottom: 1.875rem;
-  max-width: 30.625rem;
-}
-
-<p
-      className="c0 c1"
+    <p
+      className="c4 c5"
     >
       HTTP 404: We can’t find what you are looking for. Next time, always follow your nose.
     </p>
-    .c0 {
-  display: inline-block;
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 0;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: ;
-  background-image: none;
-  background-color: ;
-  border-radius: 0.25rem;
-  border: solid 0.0625rem;
-}
-
-.c0:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: ;
-  border-color: ;
-}
-
-.c0:hover {
-  background-color: ;
-  border: solid 0.0625rem;
-}
-
-.c0:active,
-.c0:active:hover,
-.c0:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: ;
-  border-color: ;
-}
-
-.c0[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-<a
-      className="c0"
+    <a
+      className="c6"
       href="/"
       onClick={[Function]}
       primary={true}
diff --git a/packages/my-joyent/src/components/navigation/__tests__/__snapshots__/section-nav.spec.js.snap b/packages/my-joyent/src/components/navigation/__tests__/__snapshots__/section-nav.spec.js.snap
index 0364d52b..5262c33b 100644
--- a/packages/my-joyent/src/components/navigation/__tests__/__snapshots__/section-nav.spec.js.snap
+++ b/packages/my-joyent/src/components/navigation/__tests__/__snapshots__/section-nav.spec.js.snap
@@ -32,13 +32,11 @@ exports[`renders <SectionNav /> without throwing 1`] = `
 .c3 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
-  color: ;
   text-decoration: none;
   cursor: pointer;
 }
 
 .c3.active {
-  color: ;
   cursor: default;
 }
 
@@ -51,78 +49,15 @@ exports[`renders <SectionNav /> without throwing 1`] = `
 <div
   className="c0"
 >
-  .c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  display: inline-block;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin-right: 1.4375rem;
-}
-
-.c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  color: ;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.c2.active {
-  color: ;
-  cursor: default;
-}
-
-.c0 {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
-<ul
-    className="c0"
+  <ul
+    className="c1"
   >
-    .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  display: inline-block;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin-right: 1.4375rem;
-}
-
-.c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  color: ;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.c1.active {
-  color: ;
-  cursor: default;
-}
-
-<li
-      className="c0"
+    <li
+      className="c2"
     >
-      .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  color: ;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.c0.active {
-  color: ;
-  cursor: default;
-}
-
-<a
+      <a
         aria-current="true"
-        className="active c0 active"
+        className="active c3 active"
         href="/"
         onClick={[Function]}
         style={Object {}}
@@ -130,45 +65,18 @@ exports[`renders <SectionNav /> without throwing 1`] = `
         Instances
       </a>
     </li>
-    .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  display: inline-block;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin-right: 1.4375rem;
-}
-
-<li
-      className="c0"
+    <li
+      className="c2"
     >
       Custom images
     </li>
-    .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  display: inline-block;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin-right: 1.4375rem;
-}
-
-<li
-      className="c0"
+    <li
+      className="c2"
     >
       Docker images
     </li>
-    .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  display: inline-block;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin-right: 1.4375rem;
-}
-
-<li
-      className="c0"
+    <li
+      className="c2"
     >
       Docker registries
     </li>
diff --git a/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
index 188411d4..15dfe480 100644
--- a/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Package /> without throwing 1`] = `
-.c2 {
+.c3 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -10,10 +10,9 @@ exports[`renders <Package /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c4 {
+.c5 {
   font-size: 0.9375rem;
   line-height: 1.5;
-  color: ;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 600;
   display: -webkit-box;
@@ -37,7 +36,7 @@ exports[`renders <Package /> without throwing 1`] = `
   padding: 0.75rem 1.125rem 0 1.125rem;
 }
 
-.c0 {
+.c1 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -59,21 +58,20 @@ exports[`renders <Package /> without throwing 1`] = `
   min-height: 7.875rem;
   margin-bottom: 0.625rem;
   border: 0.0625rem solid;
-  background-color: ;
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   margin-right: 0rem;
   margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
+  border-radius: 4px;
+  border: 1px solid;
   box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
   min-height: 11.5625rem;
-  min-width: 200px;
+  min-width: 237px;
 }
 
-.c1 {
+.c2 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -102,7 +100,7 @@ exports[`renders <Package /> without throwing 1`] = `
   flex-direction: row;
 }
 
-.c3 {
+.c4 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -128,7 +126,7 @@ exports[`renders <Package /> without throwing 1`] = `
   transform: translateY(-50%);
 }
 
-.c6 {
+.c7 {
   display: inline-block;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -144,25 +142,25 @@ exports[`renders <Package /> without throwing 1`] = `
   justify-content: flex-end;
 }
 
-.c5 {
+.c6 {
   display: inline-block;
   padding: 0 1.125rem;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
 }
 
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
 .c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+}
+
+.c9 {
   display: inline-block;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -175,8 +173,13 @@ exports[`renders <Package /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
+.c0 {
+  margin-right: 1.125rem;
+  margin-bottom: 1.125rem;
+}
+
 @media only screen and (min-width:0em) {
-  .c2 {
+  .c3 {
     -webkit-flex-basis: 50%;
     -ms-flex-basis: 50%;
     flex-basis: 50%;
@@ -186,799 +189,77 @@ exports[`renders <Package /> without throwing 1`] = `
 }
 
 <div
-  className="c0"
+  className="c0 c1"
   name="card"
 >
-  .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-    className="c0"
+  <div
+    className="c2"
     name="card-view"
   >
-    .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+    <div
+      className="c3"
       name="card-meta"
     >
-      .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-        className="c0"
+      <div
+        className="c4"
       >
-        .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-          className="c0"
+        <div
+          className="c5"
           name="card-title"
         >
           $
           0.263
            per hour
         </div>
-        .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-          className="c0 c1"
+        <div
+          className="c6 c5"
           name="card-subtitle"
         >
-          .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-            className="c0"
+          <span
+            className="c7"
           >
             7.8
              GB RAM
           </span>
         </div>
-        .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-          className="c0 c1"
+        <div
+          className="c6 c5"
           name="card-subtitle"
         >
-          .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-            className="c0"
+          <span
+            className="c7"
           >
             4
              vCPUs
           </span>
         </div>
-        .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-          className="c0 c1"
+        <div
+          className="c6 c5"
           name="card-subtitle"
         >
-          .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-            className="c0"
+          <span
+            className="c7"
           >
             2
              TB disk
           </span>
         </div>
-        .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-          className="c0 c1"
+        <div
+          className="c6 c5"
           name="card-subtitle"
         >
-          .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-            className="c0"
+          <span
+            className="c7"
           >
             SSD
           </span>
         </div>
-        .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-          className="c0 c1"
+        <div
+          className="c8 c5"
           name="card-footer"
         >
-          .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-            className="c0"
+          <span
+            className="c9"
           >
             Compute Optimized
           </span>
diff --git a/packages/my-joyent/src/components/package/index.js b/packages/my-joyent/src/components/package/index.js
index 5b7cceb6..4c63a145 100644
--- a/packages/my-joyent/src/components/package/index.js
+++ b/packages/my-joyent/src/components/package/index.js
@@ -1,4 +1,7 @@
 import React from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
 import {
   Card,
   CardSubTitle,
@@ -8,8 +11,13 @@ import {
   CardMeta
 } from 'joyent-ui-toolkit';
 
+const PackageStyled = styled(Card)`
+  margin-right: ${remcalc(18)};
+  margin-bottom: ${remcalc(18)};
+`;
+
 const Package = ({ pack: { price, memory, vcpus, disk, group } }) => (
-  <Card transparent>
+  <PackageStyled transparent>
     <CardView>
       <CardMeta>
         <CardTitle>${price} per hour</CardTitle>
@@ -21,7 +29,7 @@ const Package = ({ pack: { price, memory, vcpus, disk, group } }) => (
         <CardFooter>{group}</CardFooter>
       </CardMeta>
     </CardView>
-  </Card>
+  </PackageStyled>
 );
 
 export default Package;
diff --git a/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
index 46fe67a0..ae6336a1 100644
--- a/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
+++ b/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Packages /> without throwing 1`] = `
-.c3 {
+.c4 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -10,10 +10,9 @@ exports[`renders <Packages /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c5 {
+.c6 {
   font-size: 0.9375rem;
   line-height: 1.5;
-  color: ;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 600;
   display: -webkit-box;
@@ -37,7 +36,7 @@ exports[`renders <Packages /> without throwing 1`] = `
   padding: 0.75rem 1.125rem 0 1.125rem;
 }
 
-.c1 {
+.c2 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -59,21 +58,20 @@ exports[`renders <Packages /> without throwing 1`] = `
   min-height: 7.875rem;
   margin-bottom: 0.625rem;
   border: 0.0625rem solid;
-  background-color: ;
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   margin-right: 0rem;
   margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
+  border-radius: 4px;
+  border: 1px solid;
   box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
   min-height: 11.5625rem;
-  min-width: 200px;
+  min-width: 237px;
 }
 
-.c2 {
+.c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -102,7 +100,7 @@ exports[`renders <Packages /> without throwing 1`] = `
   flex-direction: row;
 }
 
-.c4 {
+.c5 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -128,7 +126,7 @@ exports[`renders <Packages /> without throwing 1`] = `
   transform: translateY(-50%);
 }
 
-.c7 {
+.c8 {
   display: inline-block;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -144,14 +142,14 @@ exports[`renders <Packages /> without throwing 1`] = `
   justify-content: flex-end;
 }
 
-.c6 {
+.c7 {
   display: inline-block;
   padding: 0 1.125rem;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
 }
 
-.c8 {
+.c9 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
   -webkit-flex-grow: 1;
@@ -162,7 +160,7 @@ exports[`renders <Packages /> without throwing 1`] = `
   flex-basis: 5.625rem;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -175,6 +173,11 @@ exports[`renders <Packages /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
+.c1 {
+  margin-right: 1.125rem;
+  margin-bottom: 1.125rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -186,15 +189,11 @@ exports[`renders <Packages /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  -webkit-box-pack: space-between;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: space-between;
-  justify-content: space-between;
   margin-top: 2.25rem;
 }
 
 @media only screen and (min-width:0em) {
-  .c3 {
+  .c4 {
     -webkit-flex-basis: 50%;
     -ms-flex-basis: 50%;
     flex-basis: 50%;
@@ -206,1169 +205,79 @@ exports[`renders <Packages /> without throwing 1`] = `
 <ul
   className="c0"
 >
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.016
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 0.256
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 0.25
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 0.1
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Compute Optimized
               </span>
@@ -1378,1169 +287,79 @@ exports[`renders <Packages /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.033
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 0.768
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 0.5
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 0.25
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Compute Optimized
               </span>
@@ -2550,1169 +369,79 @@ exports[`renders <Packages /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.066
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 1.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 1
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 0.5
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Compute Optimized
               </span>
@@ -3722,1169 +451,79 @@ exports[`renders <Packages /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.131
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 3.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 2
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 1
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Compute Optimized
               </span>
@@ -4894,1169 +533,79 @@ exports[`renders <Packages /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.263
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 7.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 4
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 2
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Compute Optimized
               </span>
@@ -6066,1169 +615,79 @@ exports[`renders <Packages /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.525
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 15.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 8
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 4
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Compute Optimized
               </span>
diff --git a/packages/my-joyent/src/components/packages/list.js b/packages/my-joyent/src/components/packages/list.js
index 7e15243e..d662b21a 100644
--- a/packages/my-joyent/src/components/packages/list.js
+++ b/packages/my-joyent/src/components/packages/list.js
@@ -10,16 +10,15 @@ const ListStyled = styled.ul`
   list-style: none;
   padding: 0;
   flex-wrap: wrap;
-  justify-content: space-between;
   margin-top: ${remcalc(36)};
 `;
 const Packages = ({ packages }) => (
   <ListStyled>
-    {packages.map(pack => (
+    {packages.length > 0 ? packages.map(pack => (
       <li key={pack.name}>
           <Package pack={pack} />
       </li>
-    ))}
+    )) : 'There are no packages that meet your criteria'}
   </ListStyled>
 );
 
diff --git a/packages/my-joyent/src/components/sliders/index.js b/packages/my-joyent/src/components/sliders/index.js
new file mode 100644
index 00000000..d6e4d698
--- /dev/null
+++ b/packages/my-joyent/src/components/sliders/index.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import { Slider } from 'joyent-ui-toolkit';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+const FilterWrapper = styled.section`
+  display: flex;
+
+  > div {
+    flex-grow: 1;
+
+    &:not(:last-child) {
+      margin-right: ${remcalc(36)};
+    }
+  }
+`;
+
+const Sliders = ({
+  filters: { cpu, cost, ram, disk },
+  ramSliderChange,
+  cpuSliderChange,
+  diskSliderChange,
+  costSliderChange
+}) => (
+  <FilterWrapper>
+    <Slider
+      minValue={ram.min}
+      maxValue={ram.max}
+      step={0.256}
+      value={ram}
+      onChangeComplete={value => ramSliderChange(value)}
+    >
+      GB RAM
+    </Slider>
+    <Slider
+      minValue={cpu.min}
+      maxValue={cpu.max}
+      step={0.25}
+      value={cpu}
+      onChangeComplete={value => cpuSliderChange(value)}
+    >
+      vCPUs
+    </Slider>
+    <Slider
+      minValue={disk.min}
+      maxValue={disk.max}
+      step={0.01}
+      value={disk}
+      onChangeComplete={value => diskSliderChange(value)}
+    >
+      TB Disk
+    </Slider>
+    <Slider
+      minValue={cost.min}
+      maxValue={cost.max}
+      step={0.02}
+      value={cost}
+      onChangeComplete={value => costSliderChange(value)}
+    >
+      $/hr
+    </Slider>
+  </FilterWrapper>
+);
+
+export default Sliders;
diff --git a/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap
index af10feee..56689ef4 100644
--- a/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap
@@ -20,16 +20,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c18 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c26 {
+.c30 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -54,7 +45,6 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
 .c14 {
   background-color: transparent;
   text-decoration-skip: objects;
-  color: ;
 }
 
 .c17 {
@@ -97,9 +87,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   vertical-align: middle;
   touch-action: manipulation;
   cursor: pointer;
-  color: ;
   background-image: none;
-  background-color: ;
   border-radius: 0.25rem;
   border: solid 0.0625rem;
 }
@@ -122,12 +110,9 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
 .c17:focus {
   outline: 0;
   text-decoration: none;
-  background-color: ;
-  border-color: ;
 }
 
 .c17:hover {
-  background-color: ;
   border: solid 0.0625rem;
 }
 
@@ -136,8 +121,6 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
 .c17:active:focus {
   background-image: none;
   outline: 0;
-  background-color: ;
-  border-color: ;
 }
 
 .c17[disabled] {
@@ -149,6 +132,181 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   margin-left: 1.25rem;
 }
 
+.c24 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  font-weight: 600;
+  padding: 0.5625rem 1.125rem;
+  font-weight: 600;
+}
+
+.c24::-moz-focus-inner,
+.c24[type='button']::-moz-focus-inner,
+.c24[type='reset']::-moz-focus-inner,
+.c24[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c24:-moz-focusring,
+.c24[type='button']:-moz-focusring,
+.c24[type='reset']:-moz-focusring,
+.c24[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c24:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c24:hover {
+  border: solid 0.0625rem;
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c24[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c24 + button {
+  margin-left: 1.25rem;
+}
+
+.c25 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  padding: 0.5625rem 1.125rem;
+  font-weight: 600;
+}
+
+.c25::-moz-focus-inner,
+.c25[type='button']::-moz-focus-inner,
+.c25[type='reset']::-moz-focus-inner,
+.c25[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c25:-moz-focusring,
+.c25[type='button']:-moz-focusring,
+.c25[type='reset']:-moz-focusring,
+.c25[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c25:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c25:hover {
+  border: solid 0.0625rem;
+}
+
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c25[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c25 + button {
+  margin-left: 1.25rem;
+}
+
 .c11 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 500;
@@ -160,7 +318,6 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   font-weight: 500;
   font-size: 1.5rem;
   font-weight: 400;
-  color: ;
   margin: 1.25rem 0 1.125rem 0;
   display: inline-block;
 }
@@ -208,7 +365,6 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   font-style: normal;
   font-stretch: normal;
   display: block;
-  color: ;
   margin-right: 0.75rem;
   font-weight: bold;
 }
@@ -216,9 +372,9 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
 .c7 {
   position: relative;
   margin-bottom: 0.75rem;
-  background-color: ;
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
   border: 0.0625rem solid;
+  width: 100%;
 }
 
 .c8 {
@@ -227,7 +383,6 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   left: 0;
   width: 2.25rem;
   height: 100%;
-  background-color: ;
 }
 
 .c9 {
@@ -336,10 +491,9 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   margin-top: 0.75rem;
 }
 
-.c28 {
+.c32 {
   font-size: 0.9375rem;
   line-height: 1.5;
-  color: ;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 600;
   display: -webkit-box;
@@ -363,7 +517,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   padding: 0.75rem 1.125rem 0 1.125rem;
 }
 
-.c24 {
+.c28 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -385,21 +539,20 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   min-height: 7.875rem;
   margin-bottom: 0.625rem;
   border: 0.0625rem solid;
-  background-color: ;
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   margin-right: 0rem;
   margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
+  border-radius: 4px;
+  border: 1px solid;
   box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
   min-height: 11.5625rem;
-  min-width: 200px;
+  min-width: 237px;
 }
 
-.c25 {
+.c29 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -428,7 +581,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   flex-direction: row;
 }
 
-.c27 {
+.c31 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -454,7 +607,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   transform: translateY(-50%);
 }
 
-.c30 {
+.c34 {
   display: inline-block;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -470,14 +623,14 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   justify-content: flex-end;
 }
 
-.c29 {
+.c33 {
   display: inline-block;
   padding: 0 1.125rem;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
 }
 
-.c31 {
+.c35 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
   -webkit-flex-grow: 1;
@@ -488,7 +641,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   flex-basis: 5.625rem;
 }
 
-.c32 {
+.c36 {
   display: inline-block;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -513,13 +666,11 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
 .c4 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
-  color: ;
   text-decoration: none;
   cursor: pointer;
 }
 
 .c4.active {
-  color: ;
   cursor: default;
 }
 
@@ -534,7 +685,6 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  width: 100%;
 }
 
 .c20 > div {
@@ -548,6 +698,28 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
 }
 
 .c23 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 2.25rem;
+}
+
+.c18 {
+  width: 100%;
+}
+
+.c27 {
+  margin-right: 1.125rem;
+  margin-bottom: 1.125rem;
+}
+
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -558,25 +730,11 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  -webkit-box-pack: space-between;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: space-between;
-  justify-content: space-between;
   margin-top: 2.25rem;
 }
 
 @media only screen and (min-width:0em) {
-  .c18 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-basis: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c26 {
+  .c30 {
     -webkit-flex-basis: 50%;
     -ms-flex-basis: 50%;
     flex-basis: 50%;
@@ -606,700 +764,19 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
 <div
   className="c0"
 >
-  .c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c17 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c25 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c13 {
-  background-color: transparent;
-  text-decoration-skip: objects;
-  color: ;
-}
-
-.c16 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-  min-width: 7.5rem;
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 0;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: ;
-  background-image: none;
-  background-color: ;
-  border-radius: 0.25rem;
-  border: solid 0.0625rem;
-}
-
-.c16::-moz-focus-inner,
-.c16[type='button']::-moz-focus-inner,
-.c16[type='reset']::-moz-focus-inner,
-.c16[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c16:-moz-focusring,
-.c16[type='button']:-moz-focusring,
-.c16[type='reset']:-moz-focusring,
-.c16[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c16:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: ;
-  border-color: ;
-}
-
-.c16:hover {
-  background-color: ;
-  border: solid 0.0625rem;
-}
-
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: ;
-  border-color: ;
-}
-
-.c16[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c16 + button {
-  margin-left: 1.25rem;
-}
-
-.c10 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 0.9375rem;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 1.5rem;
-  font-weight: 400;
-  color: ;
-  margin: 1.25rem 0 1.125rem 0;
-  display: inline-block;
-}
-
-.c5 {
-  border: solid;
-  border-width: 0 0.125rem 0.125rem 0;
-  display: inline-block;
-  padding: 0.125rem;
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
-}
-
-.c12 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c15 {
-  background-color: #FFFFFF;
-  padding: 0.75rem;
-  min-width: auto;
-  border: none;
-  box-shadow: none;
-}
-
-.c15:hover,
-.c15:focus,
-.c15:active,
-.c15:active:hover,
-.c15:active:focus {
-  background-color: #FFFFFF;
-  border: none;
-  box-shadow: none;
-}
-
-.c18 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c6 {
-  position: relative;
-  margin-bottom: 0.75rem;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid;
-}
-
-.c7 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 2.25rem;
-  height: 100%;
-  background-color: ;
-}
-
-.c8 {
-  padding: 0.75rem 0 0.84375rem 0;
-}
-
-.c9 {
-  margin: 0 3.375rem 0.09375rem 3.375rem;
-  font-weight: 600;
-}
-
-.c11 {
-  margin: 0.09375rem 3.375rem 0 3.375rem;
-}
-
-.c14 {
-  position: absolute;
-  right: 0.1875rem;
-  top: 0.1875rem;
-}
-
-.c20 .input-range {
-  position: relative;
-  width: calc(100% - 18px);
-  margin: auto;
-  min-height: 0.625rem;
-}
-
-.c20 .slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #FFFFFF;
-  border: 2px solid #bdbdbd;
-  border-radius: 50%;
-  cursor: pointer;
-  display: block;
-  height: 0.875rem;
-  width: 0.875rem;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  outline: none;
-  position: absolute;
-  top: 50%;
-  margin-top: 0.125rem;
-}
-
-.c20 .slider::active {
-  -webkit-transform: scale(1.3);
-  -ms-transform: scale(1.3);
-  transform: scale(1.3);
-}
-
-.c20 .slider::focus {
-  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
-}
-
-.c20 .disabled .track {
-  background: #D8D8D8;
-}
-
-.c20 .disabled .slider {
-  background: #CCC;
-  border: 1px solid #CCC;
-  box-shadow: none;
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.c20 .min,
-.c20 .max {
-  display: none;
-}
-
-.c20 .value {
-  top: 0.5rem;
-  position: absolute;
-}
-
-.c20 .value .label-container {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: #464646;
-  left: -50%;
-  position: relative;
-}
-
-.c20 .track {
-  background: #D8D8D8;
-  cursor: pointer;
-  display: block;
-  height: 0.25rem;
-  position: relative;
-}
-
-.c20 .active-track {
-  background: #364ACD;
-  height: 100%;
-  position: absolute;
-}
-
-.c21 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-.c27 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c23 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c24 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c26 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c29 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c28 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c30 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c31 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-.c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  display: inline-block;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin-right: 1.4375rem;
-}
-
-.c3 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  color: ;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.c3.active {
-  color: ;
-  cursor: default;
-}
-
-.c1 {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
-.c19 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-}
-
-.c19 > div {
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-}
-
-.c19 > div:not(:last-child) {
-  margin-right: 2.25rem;
-}
-
-.c22 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  list-style: none;
-  padding: 0;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-pack: space-between;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: space-between;
-  justify-content: space-between;
-  margin-top: 2.25rem;
-}
-
-@media only screen and (min-width:0em) {
-  .c17 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-basis: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c25 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<main>
-    .c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  display: inline-block;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin-right: 1.4375rem;
-}
-
-.c3 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  color: ;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.c3.active {
-  color: ;
-  cursor: default;
-}
-
-.c1 {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
-<div
-      className="c0"
+  <main>
+    <div
+      className="c1"
     >
-      .c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  display: inline-block;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin-right: 1.4375rem;
-}
-
-.c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  color: ;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.c2.active {
-  color: ;
-  cursor: default;
-}
-
-.c0 {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
-<ul
-        className="c0"
+      <ul
+        className="c2"
       >
-        .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  display: inline-block;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin-right: 1.4375rem;
-}
-
-.c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  color: ;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.c1.active {
-  color: ;
-  cursor: default;
-}
-
-<li
-          className="c0"
+        <li
+          className="c3"
         >
-          .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  color: ;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.c0.active {
-  color: ;
-  cursor: default;
-}
-
-<a
+          <a
             aria-current="true"
-            className="active c0 active"
+            className="active c4 active"
             href="/"
             onClick={[Function]}
             style={Object {}}
@@ -1307,780 +784,82 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             Instances
           </a>
         </li>
-        .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  display: inline-block;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin-right: 1.4375rem;
-}
-
-<li
-          className="c0"
+        <li
+          className="c3"
         >
           Custom images
         </li>
-        .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  display: inline-block;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin-right: 1.4375rem;
-}
-
-<li
-          className="c0"
+        <li
+          className="c3"
         >
           Docker images
         </li>
-        .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  display: inline-block;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin-right: 1.4375rem;
-}
-
-<li
-          className="c0"
+        <li
+          className="c3"
         >
           Docker registries
         </li>
       </ul>
     </div>
-    .c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 1.5rem;
-  font-weight: 400;
-  color: ;
-  margin: 1.25rem 0 1.125rem 0;
-  display: inline-block;
-}
-
-.c2 {
-  border: solid;
-  border-width: 0 0.125rem 0.125rem 0;
-  display: inline-block;
-  padding: 0.125rem;
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
-}
-
-<div
-      className="c0"
+    <div
+      className="c1"
       name="breadcrum"
     >
-      .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 1.5rem;
-  font-weight: 400;
-  color: ;
-  margin: 1.25rem 0 1.125rem 0;
-  display: inline-block;
-}
-
-.c1 {
-  border: solid;
-  border-width: 0 0.125rem 0.125rem 0;
-  display: inline-block;
-  padding: 0.125rem;
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
-}
-
-<div>
-        .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 1.5rem;
-  font-weight: 400;
-  color: ;
-  margin: 1.25rem 0 1.125rem 0;
-  display: inline-block;
-}
-
-<h2
-          className="c0"
+      <div>
+        <h2
+          className="c5"
           name="breadcrum-item"
         >
           Instances
         </h2>
-        .c0 {
-  border: solid;
-  border-width: 0 0.125rem 0.125rem 0;
-  display: inline-block;
-  padding: 0.125rem;
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
-}
-
-<div
-          className="c0"
+        <div
+          className="c6"
         />
       </div>
-      .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 1.5rem;
-  font-weight: 400;
-  color: ;
-  margin: 1.25rem 0 1.125rem 0;
-  display: inline-block;
-}
-
-.c1 {
-  border: solid;
-  border-width: 0 0.125rem 0.125rem 0;
-  display: inline-block;
-  padding: 0.125rem;
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
-}
-
-<div>
-        .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 1.5rem;
-  font-weight: 400;
-  color: ;
-  margin: 1.25rem 0 1.125rem 0;
-  display: inline-block;
-}
-
-<h2
-          className="c0"
+      <div>
+        <h2
+          className="c5"
           name="breadcrum-item"
         >
           Create Instance
         </h2>
-        .c0 {
-  border: solid;
-  border-width: 0 0.125rem 0.125rem 0;
-  display: inline-block;
-  padding: 0.125rem;
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
-}
-
-<div
-          className="c0"
+        <div
+          className="c6"
         />
       </div>
     </div>
-    .c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c8 {
-  background-color: transparent;
-  text-decoration-skip: objects;
-  color: ;
-}
-
-.c11 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-  min-width: 7.5rem;
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 0;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: ;
-  background-image: none;
-  background-color: ;
-  border-radius: 0.25rem;
-  border: solid 0.0625rem;
-}
-
-.c11::-moz-focus-inner,
-.c11[type='button']::-moz-focus-inner,
-.c11[type='reset']::-moz-focus-inner,
-.c11[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c11:-moz-focusring,
-.c11[type='button']:-moz-focusring,
-.c11[type='reset']:-moz-focusring,
-.c11[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c11:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: ;
-  border-color: ;
-}
-
-.c11:hover {
-  background-color: ;
-  border: solid 0.0625rem;
-}
-
-.c11:active,
-.c11:active:hover,
-.c11:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: ;
-  border-color: ;
-}
-
-.c11[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c11 + button {
-  margin-left: 1.25rem;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 0.9375rem;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c10 {
-  background-color: #FFFFFF;
-  padding: 0.75rem;
-  min-width: auto;
-  border: none;
-  box-shadow: none;
-}
-
-.c10:hover,
-.c10:focus,
-.c10:active,
-.c10:active:hover,
-.c10:active:focus {
-  background-color: #FFFFFF;
-  border: none;
-  box-shadow: none;
-}
-
-.c1 {
-  position: relative;
-  margin-bottom: 0.75rem;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid;
-}
-
-.c2 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 2.25rem;
-  height: 100%;
-  background-color: ;
-}
-
-.c3 {
-  padding: 0.75rem 0 0.84375rem 0;
-}
-
-.c4 {
-  margin: 0 3.375rem 0.09375rem 3.375rem;
-  font-weight: 600;
-}
-
-.c6 {
-  margin: 0.09375rem 3.375rem 0 3.375rem;
-}
-
-.c9 {
-  position: absolute;
-  right: 0.1875rem;
-  top: 0.1875rem;
-}
-
-<div
-      className="c0"
+    <div
+      className="c1"
     >
-      .c7 {
-  background-color: transparent;
-  text-decoration-skip: objects;
-  color: ;
-}
-
-.c10 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-  min-width: 7.5rem;
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 0;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: ;
-  background-image: none;
-  background-color: ;
-  border-radius: 0.25rem;
-  border: solid 0.0625rem;
-}
-
-.c10::-moz-focus-inner,
-.c10[type='button']::-moz-focus-inner,
-.c10[type='reset']::-moz-focus-inner,
-.c10[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c10:-moz-focusring,
-.c10[type='button']:-moz-focusring,
-.c10[type='reset']:-moz-focusring,
-.c10[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c10:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: ;
-  border-color: ;
-}
-
-.c10:hover {
-  background-color: ;
-  border: solid 0.0625rem;
-}
-
-.c10:active,
-.c10:active:hover,
-.c10:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: ;
-  border-color: ;
-}
-
-.c10[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c10 + button {
-  margin-left: 1.25rem;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 0.9375rem;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c9 {
-  background-color: #FFFFFF;
-  padding: 0.75rem;
-  min-width: auto;
-  border: none;
-  box-shadow: none;
-}
-
-.c9:hover,
-.c9:focus,
-.c9:active,
-.c9:active:hover,
-.c9:active:focus {
-  background-color: #FFFFFF;
-  border: none;
-  box-shadow: none;
-}
-
-.c0 {
-  position: relative;
-  margin-bottom: 0.75rem;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid;
-}
-
-.c1 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 2.25rem;
-  height: 100%;
-  background-color: ;
-}
-
-.c2 {
-  padding: 0.75rem 0 0.84375rem 0;
-}
-
-.c3 {
-  margin: 0 3.375rem 0.09375rem 3.375rem;
-  font-weight: 600;
-}
-
-.c5 {
-  margin: 0.09375rem 3.375rem 0 3.375rem;
-}
-
-.c8 {
-  position: absolute;
-  right: 0.1875rem;
-  top: 0.1875rem;
-}
-
-<div
-        className="c0"
+      <div
+        className="c7"
       >
-        .c0 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 2.25rem;
-  height: 100%;
-  background-color: ;
-}
-
-<div
-          className="c0"
+        <div
+          className="c8"
         />
-        .c5 {
-  background-color: transparent;
-  text-decoration-skip: objects;
-  color: ;
-}
-
-.c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 0.9375rem;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c0 {
-  padding: 0.75rem 0 0.84375rem 0;
-}
-
-.c1 {
-  margin: 0 3.375rem 0.09375rem 3.375rem;
-  font-weight: 600;
-}
-
-.c3 {
-  margin: 0.09375rem 3.375rem 0 3.375rem;
-}
-
-<div
-          className="c0"
+        <div
+          className="c9"
         >
-          .c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 0.9375rem;
-}
-
-.c0 {
-  margin: 0 3.375rem 0.09375rem 3.375rem;
-  font-weight: 600;
-}
-
-<h3
-            className="c0 c1"
+          <h3
+            className="c10 c11"
           >
             Choosing deployement data center
           </h3>
-          .c2 {
-  background-color: transparent;
-  text-decoration-skip: objects;
-  color: ;
-}
-
-.c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c0 {
-  margin: 0.09375rem 3.375rem 0 3.375rem;
-}
-
-<p
-            className="c0 c1"
+          <p
+            className="c12 c13"
           >
-            .c0 {
-  background-color: transparent;
-  text-decoration-skip: objects;
-  color: ;
-}
-
-<p>
-              Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. 
-              .c0 {
-  background-color: transparent;
-  text-decoration-skip: objects;
-  color: ;
-}
-
-<a
-                className="c0"
-                href="#"
-              >
-                Learn More
-              </a>
-            </p>
+            Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements.
+             
+            <a
+              className="c14"
+              href="#"
+            >
+              Learn More
+            </a>
           </p>
         </div>
-        .c2 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-  min-width: 7.5rem;
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 0;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: ;
-  background-image: none;
-  background-color: ;
-  border-radius: 0.25rem;
-  border: solid 0.0625rem;
-}
-
-.c2::-moz-focus-inner,
-.c2[type='button']::-moz-focus-inner,
-.c2[type='reset']::-moz-focus-inner,
-.c2[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c2:-moz-focusring,
-.c2[type='button']:-moz-focusring,
-.c2[type='reset']:-moz-focusring,
-.c2[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c2:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: ;
-  border-color: ;
-}
-
-.c2:hover {
-  background-color: ;
-  border: solid 0.0625rem;
-}
-
-.c2:active,
-.c2:active:hover,
-.c2:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: ;
-  border-color: ;
-}
-
-.c2[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c2 + button {
-  margin-left: 1.25rem;
-}
-
-.c1 {
-  background-color: #FFFFFF;
-  padding: 0.75rem;
-  min-width: auto;
-  border: none;
-  box-shadow: none;
-}
-
-.c1:hover,
-.c1:focus,
-.c1:active,
-.c1:active:hover,
-.c1:active:focus {
-  background-color: #FFFFFF;
-  border: none;
-  box-shadow: none;
-}
-
-.c0 {
-  position: absolute;
-  right: 0.1875rem;
-  top: 0.1875rem;
-}
-
-<button
-          className="c0 c1 c2"
+        <button
+          className="c15 c16 c17"
           onClick={[Function]}
         >
           <svg
@@ -2102,562 +881,26 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
         </button>
       </div>
     </div>
-    .c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c4 .input-range {
-  position: relative;
-  width: calc(100% - 18px);
-  margin: auto;
-  min-height: 0.625rem;
-}
-
-.c4 .slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #FFFFFF;
-  border: 2px solid #bdbdbd;
-  border-radius: 50%;
-  cursor: pointer;
-  display: block;
-  height: 0.875rem;
-  width: 0.875rem;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  outline: none;
-  position: absolute;
-  top: 50%;
-  margin-top: 0.125rem;
-}
-
-.c4 .slider::active {
-  -webkit-transform: scale(1.3);
-  -ms-transform: scale(1.3);
-  transform: scale(1.3);
-}
-
-.c4 .slider::focus {
-  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
-}
-
-.c4 .disabled .track {
-  background: #D8D8D8;
-}
-
-.c4 .disabled .slider {
-  background: #CCC;
-  border: 1px solid #CCC;
-  box-shadow: none;
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.c4 .min,
-.c4 .max {
-  display: none;
-}
-
-.c4 .value {
-  top: 0.5rem;
-  position: absolute;
-}
-
-.c4 .value .label-container {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: #464646;
-  left: -50%;
-  position: relative;
-}
-
-.c4 .track {
-  background: #D8D8D8;
-  cursor: pointer;
-  display: block;
-  height: 0.25rem;
-  position: relative;
-}
-
-.c4 .active-track {
-  background: #364ACD;
-  height: 100%;
-  position: absolute;
-}
-
-.c5 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-}
-
-.c3 > div {
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-}
-
-.c3 > div:not(:last-child) {
-  margin-right: 2.25rem;
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-basis: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+    <div
+      className="c1"
     >
-      .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c3 .input-range {
-  position: relative;
-  width: calc(100% - 18px);
-  margin: auto;
-  min-height: 0.625rem;
-}
-
-.c3 .slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #FFFFFF;
-  border: 2px solid #bdbdbd;
-  border-radius: 50%;
-  cursor: pointer;
-  display: block;
-  height: 0.875rem;
-  width: 0.875rem;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  outline: none;
-  position: absolute;
-  top: 50%;
-  margin-top: 0.125rem;
-}
-
-.c3 .slider::active {
-  -webkit-transform: scale(1.3);
-  -ms-transform: scale(1.3);
-  transform: scale(1.3);
-}
-
-.c3 .slider::focus {
-  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
-}
-
-.c3 .disabled .track {
-  background: #D8D8D8;
-}
-
-.c3 .disabled .slider {
-  background: #CCC;
-  border: 1px solid #CCC;
-  box-shadow: none;
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.c3 .min,
-.c3 .max {
-  display: none;
-}
-
-.c3 .value {
-  top: 0.5rem;
-  position: absolute;
-}
-
-.c3 .value .label-container {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: #464646;
-  left: -50%;
-  position: relative;
-}
-
-.c3 .track {
-  background: #D8D8D8;
-  cursor: pointer;
-  display: block;
-  height: 0.25rem;
-  position: relative;
-}
-
-.c3 .active-track {
-  background: #364ACD;
-  height: 100%;
-  position: absolute;
-}
-
-.c4 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-}
-
-.c2 > div {
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-}
-
-.c2 > div:not(:last-child) {
-  margin-right: 2.25rem;
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-basis: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <section
+        className="c18"
       >
-        .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-<label
-          className="c0"
+        <label
+          className="c19"
           htmlFor=""
         >
           Choose a package
         </label>
-        .c3 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c1 .input-range {
-  position: relative;
-  width: calc(100% - 18px);
-  margin: auto;
-  min-height: 0.625rem;
-}
-
-.c1 .slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #FFFFFF;
-  border: 2px solid #bdbdbd;
-  border-radius: 50%;
-  cursor: pointer;
-  display: block;
-  height: 0.875rem;
-  width: 0.875rem;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  outline: none;
-  position: absolute;
-  top: 50%;
-  margin-top: 0.125rem;
-}
-
-.c1 .slider::active {
-  -webkit-transform: scale(1.3);
-  -ms-transform: scale(1.3);
-  transform: scale(1.3);
-}
-
-.c1 .slider::focus {
-  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
-}
-
-.c1 .disabled .track {
-  background: #D8D8D8;
-}
-
-.c1 .disabled .slider {
-  background: #CCC;
-  border: 1px solid #CCC;
-  box-shadow: none;
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.c1 .min,
-.c1 .max {
-  display: none;
-}
-
-.c1 .value {
-  top: 0.5rem;
-  position: absolute;
-}
-
-.c1 .value .label-container {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: #464646;
-  left: -50%;
-  position: relative;
-}
-
-.c1 .track {
-  background: #D8D8D8;
-  cursor: pointer;
-  display: block;
-  height: 0.25rem;
-  position: relative;
-}
-
-.c1 .active-track {
-  background: #364ACD;
-  height: 100%;
-  position: absolute;
-}
-
-.c2 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-}
-
-.c0 > div {
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-}
-
-.c0 > div:not(:last-child) {
-  margin-right: 2.25rem;
-}
-
-<section
-          className="c0"
+        <section
+          className="c20"
         >
-          .c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 .input-range {
-  position: relative;
-  width: calc(100% - 18px);
-  margin: auto;
-  min-height: 0.625rem;
-}
-
-.c0 .slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #FFFFFF;
-  border: 2px solid #bdbdbd;
-  border-radius: 50%;
-  cursor: pointer;
-  display: block;
-  height: 0.875rem;
-  width: 0.875rem;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  outline: none;
-  position: absolute;
-  top: 50%;
-  margin-top: 0.125rem;
-}
-
-.c0 .slider::active {
-  -webkit-transform: scale(1.3);
-  -ms-transform: scale(1.3);
-  transform: scale(1.3);
-}
-
-.c0 .slider::focus {
-  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
-}
-
-.c0 .disabled .track {
-  background: #D8D8D8;
-}
-
-.c0 .disabled .slider {
-  background: #CCC;
-  border: 1px solid #CCC;
-  box-shadow: none;
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.c0 .min,
-.c0 .max {
-  display: none;
-}
-
-.c0 .value {
-  top: 0.5rem;
-  position: absolute;
-}
-
-.c0 .value .label-container {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: #464646;
-  left: -50%;
-  position: relative;
-}
-
-.c0 .track {
-  background: #D8D8D8;
-  cursor: pointer;
-  display: block;
-  height: 0.25rem;
-  position: relative;
-}
-
-.c0 .active-track {
-  background: #364ACD;
-  height: 100%;
-  position: absolute;
-}
-
-.c1 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<div
-            className="c0"
+          <div
+            className="c21"
           >
-            .c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<label
-              className="c0 c1"
+            <label
+              className="c22 c19"
               htmlFor=""
             >
               GB RAM
@@ -2771,127 +1014,11 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </span>
             </div>
           </div>
-          .c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 .input-range {
-  position: relative;
-  width: calc(100% - 18px);
-  margin: auto;
-  min-height: 0.625rem;
-}
-
-.c0 .slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #FFFFFF;
-  border: 2px solid #bdbdbd;
-  border-radius: 50%;
-  cursor: pointer;
-  display: block;
-  height: 0.875rem;
-  width: 0.875rem;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  outline: none;
-  position: absolute;
-  top: 50%;
-  margin-top: 0.125rem;
-}
-
-.c0 .slider::active {
-  -webkit-transform: scale(1.3);
-  -ms-transform: scale(1.3);
-  transform: scale(1.3);
-}
-
-.c0 .slider::focus {
-  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
-}
-
-.c0 .disabled .track {
-  background: #D8D8D8;
-}
-
-.c0 .disabled .slider {
-  background: #CCC;
-  border: 1px solid #CCC;
-  box-shadow: none;
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.c0 .min,
-.c0 .max {
-  display: none;
-}
-
-.c0 .value {
-  top: 0.5rem;
-  position: absolute;
-}
-
-.c0 .value .label-container {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: #464646;
-  left: -50%;
-  position: relative;
-}
-
-.c0 .track {
-  background: #D8D8D8;
-  cursor: pointer;
-  display: block;
-  height: 0.25rem;
-  position: relative;
-}
-
-.c0 .active-track {
-  background: #364ACD;
-  height: 100%;
-  position: absolute;
-}
-
-.c1 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<div
-            className="c0"
+          <div
+            className="c21"
           >
-            .c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<label
-              className="c0 c1"
+            <label
+              className="c22 c19"
               htmlFor=""
             >
               vCPUs
@@ -3005,127 +1132,11 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </span>
             </div>
           </div>
-          .c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 .input-range {
-  position: relative;
-  width: calc(100% - 18px);
-  margin: auto;
-  min-height: 0.625rem;
-}
-
-.c0 .slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #FFFFFF;
-  border: 2px solid #bdbdbd;
-  border-radius: 50%;
-  cursor: pointer;
-  display: block;
-  height: 0.875rem;
-  width: 0.875rem;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  outline: none;
-  position: absolute;
-  top: 50%;
-  margin-top: 0.125rem;
-}
-
-.c0 .slider::active {
-  -webkit-transform: scale(1.3);
-  -ms-transform: scale(1.3);
-  transform: scale(1.3);
-}
-
-.c0 .slider::focus {
-  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
-}
-
-.c0 .disabled .track {
-  background: #D8D8D8;
-}
-
-.c0 .disabled .slider {
-  background: #CCC;
-  border: 1px solid #CCC;
-  box-shadow: none;
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.c0 .min,
-.c0 .max {
-  display: none;
-}
-
-.c0 .value {
-  top: 0.5rem;
-  position: absolute;
-}
-
-.c0 .value .label-container {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: #464646;
-  left: -50%;
-  position: relative;
-}
-
-.c0 .track {
-  background: #D8D8D8;
-  cursor: pointer;
-  display: block;
-  height: 0.25rem;
-  position: relative;
-}
-
-.c0 .active-track {
-  background: #364ACD;
-  height: 100%;
-  position: absolute;
-}
-
-.c1 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<div
-            className="c0"
+          <div
+            className="c21"
           >
-            .c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<label
-              className="c0 c1"
+            <label
+              className="c22 c19"
               htmlFor=""
             >
               TB Disk
@@ -3239,127 +1250,11 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </span>
             </div>
           </div>
-          .c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 .input-range {
-  position: relative;
-  width: calc(100% - 18px);
-  margin: auto;
-  min-height: 0.625rem;
-}
-
-.c0 .slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #FFFFFF;
-  border: 2px solid #bdbdbd;
-  border-radius: 50%;
-  cursor: pointer;
-  display: block;
-  height: 0.875rem;
-  width: 0.875rem;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  outline: none;
-  position: absolute;
-  top: 50%;
-  margin-top: 0.125rem;
-}
-
-.c0 .slider::active {
-  -webkit-transform: scale(1.3);
-  -ms-transform: scale(1.3);
-  transform: scale(1.3);
-}
-
-.c0 .slider::focus {
-  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
-}
-
-.c0 .disabled .track {
-  background: #D8D8D8;
-}
-
-.c0 .disabled .slider {
-  background: #CCC;
-  border: 1px solid #CCC;
-  box-shadow: none;
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.c0 .min,
-.c0 .max {
-  display: none;
-}
-
-.c0 .value {
-  top: 0.5rem;
-  position: absolute;
-}
-
-.c0 .value .label-container {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: #464646;
-  left: -50%;
-  position: relative;
-}
-
-.c0 .track {
-  background: #D8D8D8;
-  cursor: pointer;
-  display: block;
-  height: 0.25rem;
-  position: relative;
-}
-
-.c0 .active-track {
-  background: #364ACD;
-  height: 100%;
-  position: absolute;
-}
-
-.c1 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<div
-            className="c0"
+          <div
+            className="c21"
           >
-            .c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<label
-              className="c0 c1"
+            <label
+              className="c22 c19"
               htmlFor=""
             >
               $/hr
@@ -3474,1600 +1369,128 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </div>
           </div>
         </section>
-      </div>
+        <section
+          className="c23"
+        >
+          <div>
+            <button
+              className="c24"
+              onClick={[Function]}
+              selected={false}
+            >
+              Compute Optimized
+            </button>
+            <button
+              className="c24"
+              onClick={[Function]}
+              selected={false}
+            >
+              Memory Optimized
+            </button>
+            <button
+              className="c24"
+              onClick={[Function]}
+              selected={false}
+            >
+              General Purpose
+            </button>
+            <button
+              className="c24"
+              onClick={[Function]}
+              selected={false}
+            >
+              Storage Optimized
+            </button>
+          </div>
+          <button
+            className="c25"
+            disabled={true}
+            onClick={[Function]}
+          >
+            Reset Filters
+          </button>
+        </section>
+      </section>
     </div>
-    .c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c4 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c6 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c5 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c7 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c9 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c10 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  list-style: none;
-  padding: 0;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-pack: space-between;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: space-between;
-  justify-content: space-between;
-  margin-top: 2.25rem;
-}
-
-@media only screen and (min-width:0em) {
-  .c4 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+    <div
+      className="c1"
     >
-      .c3 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c5 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c4 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c6 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c8 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c9 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  list-style: none;
-  padding: 0;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-pack: space-between;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: space-between;
-  justify-content: space-between;
-  margin-top: 2.25rem;
-}
-
-@media only screen and (min-width:0em) {
-  .c3 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<ul
-        className="c0"
+      <ul
+        className="c26"
       >
-        .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-          .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-            className="c0"
+        <li>
+          <div
+            className="c27 c28"
             name="card"
           >
-            .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-              className="c0"
+            <div
+              className="c29"
               name="card-view"
             >
-              .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-                className="c0"
+              <div
+                className="c30"
                 name="card-meta"
               >
-                .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                  className="c0"
+                <div
+                  className="c31"
                 >
-                  .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-                    className="c0"
+                  <div
+                    className="c32"
                     name="card-title"
                   >
                     $
                     0.016
                      per hour
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       0.256
                        GB RAM
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       0.25
                        vCPUs
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       0.1
                        TB disk
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       SSD
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c35 c32"
                     name="card-footer"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c36"
                     >
                       Compute Optimized
                     </span>
@@ -5077,1169 +1500,79 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </div>
           </div>
         </li>
-        .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-          .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-            className="c0"
+        <li>
+          <div
+            className="c27 c28"
             name="card"
           >
-            .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-              className="c0"
+            <div
+              className="c29"
               name="card-view"
             >
-              .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-                className="c0"
+              <div
+                className="c30"
                 name="card-meta"
               >
-                .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                  className="c0"
+                <div
+                  className="c31"
                 >
-                  .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-                    className="c0"
+                  <div
+                    className="c32"
                     name="card-title"
                   >
                     $
                     0.033
                      per hour
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       0.768
                        GB RAM
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       0.5
                        vCPUs
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       0.25
                        TB disk
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       SSD
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c35 c32"
                     name="card-footer"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c36"
                     >
                       Compute Optimized
                     </span>
@@ -6249,1169 +1582,79 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </div>
           </div>
         </li>
-        .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-          .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-            className="c0"
+        <li>
+          <div
+            className="c27 c28"
             name="card"
           >
-            .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-              className="c0"
+            <div
+              className="c29"
               name="card-view"
             >
-              .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-                className="c0"
+              <div
+                className="c30"
                 name="card-meta"
               >
-                .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                  className="c0"
+                <div
+                  className="c31"
                 >
-                  .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-                    className="c0"
+                  <div
+                    className="c32"
                     name="card-title"
                   >
                     $
                     0.066
                      per hour
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       1.8
                        GB RAM
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       1
                        vCPUs
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       0.5
                        TB disk
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       SSD
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c35 c32"
                     name="card-footer"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c36"
                     >
                       Compute Optimized
                     </span>
@@ -7421,1169 +1664,79 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </div>
           </div>
         </li>
-        .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-          .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-            className="c0"
+        <li>
+          <div
+            className="c27 c28"
             name="card"
           >
-            .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-              className="c0"
+            <div
+              className="c29"
               name="card-view"
             >
-              .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-                className="c0"
+              <div
+                className="c30"
                 name="card-meta"
               >
-                .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                  className="c0"
+                <div
+                  className="c31"
                 >
-                  .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-                    className="c0"
+                  <div
+                    className="c32"
                     name="card-title"
                   >
                     $
                     0.131
                      per hour
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       3.8
                        GB RAM
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       2
                        vCPUs
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       1
                        TB disk
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       SSD
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c35 c32"
                     name="card-footer"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c36"
                     >
                       Compute Optimized
                     </span>
@@ -8593,1169 +1746,79 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </div>
           </div>
         </li>
-        .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-          .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-            className="c0"
+        <li>
+          <div
+            className="c27 c28"
             name="card"
           >
-            .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-              className="c0"
+            <div
+              className="c29"
               name="card-view"
             >
-              .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-                className="c0"
+              <div
+                className="c30"
                 name="card-meta"
               >
-                .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                  className="c0"
+                <div
+                  className="c31"
                 >
-                  .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-                    className="c0"
+                  <div
+                    className="c32"
                     name="card-title"
                   >
                     $
                     0.263
                      per hour
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       7.8
                        GB RAM
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       4
                        vCPUs
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       2
                        TB disk
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       SSD
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c35 c32"
                     name="card-footer"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c36"
                     >
                       Compute Optimized
                     </span>
@@ -9765,1169 +1828,79 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </div>
           </div>
         </li>
-        .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-          .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-            className="c0"
+        <li>
+          <div
+            className="c27 c28"
             name="card"
           >
-            .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-              className="c0"
+            <div
+              className="c29"
               name="card-view"
             >
-              .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-                className="c0"
+              <div
+                className="c30"
                 name="card-meta"
               >
-                .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                  className="c0"
+                <div
+                  className="c31"
                 >
-                  .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-                    className="c0"
+                  <div
+                    className="c32"
                     name="card-title"
                   >
                     $
                     0.525
                      per hour
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       15.8
                        GB RAM
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       8
                        vCPUs
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       4
                        TB disk
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       SSD
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c35 c32"
                     name="card-footer"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c36"
                     >
                       Compute Optimized
                     </span>
@@ -10937,1169 +1910,79 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </div>
           </div>
         </li>
-        .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-          .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-            className="c0"
+        <li>
+          <div
+            className="c27 c28"
             name="card"
           >
-            .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-              className="c0"
+            <div
+              className="c29"
               name="card-view"
             >
-              .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-                className="c0"
+              <div
+                className="c30"
                 name="card-meta"
               >
-                .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                  className="c0"
+                <div
+                  className="c31"
                 >
-                  .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-                    className="c0"
+                  <div
+                    className="c32"
                     name="card-title"
                   >
                     $
                     0.084
                      per hour
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       3.8
                        GB RAM
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       1
                        vCPUs
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       0.5
                        TB disk
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       SSD
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c35 c32"
                     name="card-footer"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c36"
                     >
                       General Purpose
                     </span>
@@ -12109,1169 +1992,79 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </div>
           </div>
         </li>
-        .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-          .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-            className="c0"
+        <li>
+          <div
+            className="c27 c28"
             name="card"
           >
-            .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-              className="c0"
+            <div
+              className="c29"
               name="card-view"
             >
-              .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-                className="c0"
+              <div
+                className="c30"
                 name="card-meta"
               >
-                .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                  className="c0"
+                <div
+                  className="c31"
                 >
-                  .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-                    className="c0"
+                  <div
+                    className="c32"
                     name="card-title"
                   >
                     $
                     0.166
                      per hour
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       7.8
                        GB RAM
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       2
                        vCPUs
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       1
                        TB disk
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       SSD
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c35 c32"
                     name="card-footer"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c36"
                     >
                       General Purpose
                     </span>
@@ -13281,1169 +2074,79 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </div>
           </div>
         </li>
-        .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-          .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-            className="c0"
+        <li>
+          <div
+            className="c27 c28"
             name="card"
           >
-            .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-              className="c0"
+            <div
+              className="c29"
               name="card-view"
             >
-              .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-                className="c0"
+              <div
+                className="c30"
                 name="card-meta"
               >
-                .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                  className="c0"
+                <div
+                  className="c31"
                 >
-                  .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-                    className="c0"
+                  <div
+                    className="c32"
                     name="card-title"
                   >
                     $
                     0.333
                      per hour
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       15.8
                        GB RAM
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       4
                        vCPUs
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       2
                        TB disk
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       SSD
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c35 c32"
                     name="card-footer"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c36"
                     >
                       General Purpose
                     </span>
@@ -14453,1169 +2156,79 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </div>
           </div>
         </li>
-        .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-          .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-            className="c0"
+        <li>
+          <div
+            className="c27 c28"
             name="card"
           >
-            .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-              className="c0"
+            <div
+              className="c29"
               name="card-view"
             >
-              .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-                className="c0"
+              <div
+                className="c30"
                 name="card-meta"
               >
-                .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                  className="c0"
+                <div
+                  className="c31"
                 >
-                  .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-                    className="c0"
+                  <div
+                    className="c32"
                     name="card-title"
                   >
                     $
                     0.665
                      per hour
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       31.8
                        GB RAM
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       8
                        vCPUs
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       4
                        TB disk
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       SSD
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c35 c32"
                     name="card-footer"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c36"
                     >
                       General Purpose
                     </span>
@@ -15625,1169 +2238,79 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </div>
           </div>
         </li>
-        .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-          .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-            className="c0"
+        <li>
+          <div
+            className="c27 c28"
             name="card"
           >
-            .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-              className="c0"
+            <div
+              className="c29"
               name="card-view"
             >
-              .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-                className="c0"
+              <div
+                className="c30"
                 name="card-meta"
               >
-                .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                  className="c0"
+                <div
+                  className="c31"
                 >
-                  .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-                    className="c0"
+                  <div
+                    className="c32"
                     name="card-title"
                   >
                     $
                     0.259
                      per hour
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       15.8
                        GB RAM
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       2
                        vCPUs
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       1
                        TB disk
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       SSD
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c35 c32"
                     name="card-footer"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c36"
                     >
                       Memory Optimized
                     </span>
@@ -16797,1169 +2320,79 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </div>
           </div>
         </li>
-        .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-          .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-            className="c0"
+        <li>
+          <div
+            className="c27 c28"
             name="card"
           >
-            .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-              className="c0"
+            <div
+              className="c29"
               name="card-view"
             >
-              .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-                className="c0"
+              <div
+                className="c30"
                 name="card-meta"
               >
-                .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                  className="c0"
+                <div
+                  className="c31"
                 >
-                  .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-                    className="c0"
+                  <div
+                    className="c32"
                     name="card-title"
                   >
                     $
                     0.52
                      per hour
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       31.8
                        GB RAM
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       4
                        vCPUs
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       2
                        TB disk
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       SSD
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c35 c32"
                     name="card-footer"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c36"
                     >
                       Memory Optimized
                     </span>
@@ -17969,1169 +2402,79 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </div>
           </div>
         </li>
-        .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-          .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-            className="c0"
+        <li>
+          <div
+            className="c27 c28"
             name="card"
           >
-            .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-              className="c0"
+            <div
+              className="c29"
               name="card-view"
             >
-              .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-                className="c0"
+              <div
+                className="c30"
                 name="card-meta"
               >
-                .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                  className="c0"
+                <div
+                  className="c31"
                 >
-                  .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-                    className="c0"
+                  <div
+                    className="c32"
                     name="card-title"
                   >
                     $
                     1.039
                      per hour
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       63.8
                        GB RAM
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       8
                        vCPUs
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       4
                        TB disk
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       SSD
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c35 c32"
                     name="card-footer"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c36"
                     >
                       Memory Optimized
                     </span>
@@ -19141,1169 +2484,79 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </div>
           </div>
         </li>
-        .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-          .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-            className="c0"
+        <li>
+          <div
+            className="c27 c28"
             name="card"
           >
-            .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-              className="c0"
+            <div
+              className="c29"
               name="card-view"
             >
-              .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-                className="c0"
+              <div
+                className="c30"
                 name="card-meta"
               >
-                .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                  className="c0"
+                <div
+                  className="c31"
                 >
-                  .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-                    className="c0"
+                  <div
+                    className="c32"
                     name="card-title"
                   >
                     $
                     1.066
                      per hour
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       31.8
                        GB RAM
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       4
                        vCPUs
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       8
                        TB disk
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       SSD
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c35 c32"
                     name="card-footer"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c36"
                     >
                       Storage Optimized
                     </span>
@@ -20313,1169 +2566,79 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </div>
           </div>
         </li>
-        .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-          .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-            className="c0"
+        <li>
+          <div
+            className="c27 c28"
             name="card"
           >
-            .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-              className="c0"
+            <div
+              className="c29"
               name="card-view"
             >
-              .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-                className="c0"
+              <div
+                className="c30"
                 name="card-meta"
               >
-                .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                  className="c0"
+                <div
+                  className="c31"
                 >
-                  .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-                    className="c0"
+                  <div
+                    className="c32"
                     name="card-title"
                   >
                     $
                     2.31
                      per hour
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       63.8
                        GB RAM
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       8
                        vCPUs
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       16
                        TB disk
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       SSD
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c35 c32"
                     name="card-footer"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c36"
                     >
                       Storage Optimized
                     </span>
@@ -21485,1169 +2648,79 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </div>
           </div>
         </li>
-        .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-          .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-            className="c0"
+        <li>
+          <div
+            className="c27 c28"
             name="card"
           >
-            .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-              className="c0"
+            <div
+              className="c29"
               name="card-view"
             >
-              .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-                className="c0"
+              <div
+                className="c30"
                 name="card-meta"
               >
-                .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                  className="c0"
+                <div
+                  className="c31"
                 >
-                  .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-                    className="c0"
+                  <div
+                    className="c32"
                     name="card-title"
                   >
                     $
                     0.413
                      per hour
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       15.8
                        GB RAM
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       2
                        vCPUs
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       12
                        TB disk
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       SSD
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c35 c32"
                     name="card-footer"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c36"
                     >
                       Storage Optimized
                     </span>
@@ -22657,1169 +2730,79 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </div>
           </div>
         </li>
-        .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-          .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-            className="c0"
+        <li>
+          <div
+            className="c27 c28"
             name="card"
           >
-            .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-              className="c0"
+            <div
+              className="c29"
               name="card-view"
             >
-              .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-                className="c0"
+              <div
+                className="c30"
                 name="card-meta"
               >
-                .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                  className="c0"
+                <div
+                  className="c31"
                 >
-                  .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-                    className="c0"
+                  <div
+                    className="c32"
                     name="card-title"
                   >
                     $
                     0.825
                      per hour
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       31.8
                        GB RAM
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       4
                        vCPUs
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       24
                        TB disk
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       SSD
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c35 c32"
                     name="card-footer"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c36"
                     >
                       Storage Optimized
                     </span>
@@ -23829,1169 +2812,79 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </div>
           </div>
         </li>
-        .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-          .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-            className="c0"
+        <li>
+          <div
+            className="c27 c28"
             name="card"
           >
-            .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-              className="c0"
+            <div
+              className="c29"
               name="card-view"
             >
-              .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-                className="c0"
+              <div
+                className="c30"
                 name="card-meta"
               >
-                .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                  className="c0"
+                <div
+                  className="c31"
                 >
-                  .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-                    className="c0"
+                  <div
+                    className="c32"
                     name="card-title"
                   >
                     $
                     1.75
                      per hour
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       63.8
                        GB RAM
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       8
                        vCPUs
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       49
                        TB disk
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c33 c32"
                     name="card-subtitle"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c34"
                     >
                       SSD
                     </span>
                   </div>
-                  .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-                    className="c0 c1"
+                  <div
+                    className="c35 c32"
                     name="card-footer"
                   >
-                    .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                      className="c0"
+                    <span
+                      className="c36"
                     >
                       Storage Optimized
                     </span>
diff --git a/packages/my-joyent/src/containers/home/index.js b/packages/my-joyent/src/containers/home/index.js
index e962e944..f2283291 100644
--- a/packages/my-joyent/src/containers/home/index.js
+++ b/packages/my-joyent/src/containers/home/index.js
@@ -1,12 +1,14 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import changeFilters from '../../state/actions';
+import { changeFilters, resetFilters } from '../../state/actions';
 import { LayoutContainer } from '@components/layout';
 import { Home } from '@components/home';
 
-const HomeHOC = ({ filters, onFilterChange }) => (
+const HomeHOC = (props) => (
   <LayoutContainer>
-    <Home filters={filters} onFilterChange={onFilterChange} />
+    <Home
+      {...props}
+    />
   </LayoutContainer>
 );
 
@@ -20,6 +22,9 @@ const mapDispatchToProps = dispatch => {
   return {
     onFilterChange: filters => {
       dispatch(changeFilters(filters));
+    },
+    onFilterReset: () => {
+      dispatch(resetFilters());
     }
   };
 };
diff --git a/packages/my-joyent/src/containers/navigation/__tests__/__snapshots__/header.spec.js.snap b/packages/my-joyent/src/containers/navigation/__tests__/__snapshots__/header.spec.js.snap
index 2d040e98..ff3c6ec7 100644
--- a/packages/my-joyent/src/containers/navigation/__tests__/__snapshots__/header.spec.js.snap
+++ b/packages/my-joyent/src/containers/navigation/__tests__/__snapshots__/header.spec.js.snap
@@ -6,7 +6,6 @@ exports[`renders <Header /> without throwing 1`] = `
   font-weight: 500;
   font-size: 1.5rem;
   text-transform: uppercase;
-  color: ;
   font-size: 1.8125rem;
   margin: 0;
 }
@@ -35,9 +34,9 @@ exports[`renders <Header /> without throwing 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
-  -webkit-box-pack: space-between;
+  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: space-between;
+  -ms-flex-pack: justify;
   justify-content: space-between;
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
@@ -46,7 +45,6 @@ exports[`renders <Header /> without throwing 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  background-color: ;
   max-height: 3.3125rem;
   min-height: 3.3125rem;
   padding: 0 1.125rem;
@@ -62,75 +60,18 @@ exports[`renders <Header /> without throwing 1`] = `
 <div
   className="c0"
 >
-  .c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 1.5rem;
-  text-transform: uppercase;
-  color: ;
-  font-size: 1.8125rem;
-  margin: 0;
-}
-
-.c0 {
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  padding: 0.9375rem 0;
-}
-
-.c2 {
-  border-style: none;
-  width: 5.4375rem;
-  height: 1.5625rem;
-}
-
-<div
-    className="c0"
+  <div
+    className="c1"
   >
-    .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 1.5rem;
-  text-transform: uppercase;
-  color: ;
-  font-size: 1.8125rem;
-  margin: 0;
-}
-
-.c1 {
-  border-style: none;
-  width: 5.4375rem;
-  height: 1.5625rem;
-}
-
-<h2
-      className="c0"
+    <h2
+      className="c2"
     >
-      .c0 {
-  border-style: none;
-  width: 5.4375rem;
-  height: 1.5625rem;
-}
-
-<a
+      <a
         href="/"
         onClick={[Function]}
       >
-        .c0 {
-  border-style: none;
-  width: 5.4375rem;
-  height: 1.5625rem;
-}
-
-<img
-          className="c0"
+        <img
+          className="c3"
           src="test-file-mock"
         />
       </a>
diff --git a/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap
index f9cdcb6f..b956e928 100644
--- a/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <PackagesHOC /> without throwing 1`] = `
-.c3 {
+.c4 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -10,10 +10,9 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c5 {
+.c6 {
   font-size: 0.9375rem;
   line-height: 1.5;
-  color: ;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 600;
   display: -webkit-box;
@@ -37,7 +36,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   padding: 0.75rem 1.125rem 0 1.125rem;
 }
 
-.c1 {
+.c2 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -59,21 +58,20 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   min-height: 7.875rem;
   margin-bottom: 0.625rem;
   border: 0.0625rem solid;
-  background-color: ;
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   margin-right: 0rem;
   margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
+  border-radius: 4px;
+  border: 1px solid;
   box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
   min-height: 11.5625rem;
-  min-width: 200px;
+  min-width: 237px;
 }
 
-.c2 {
+.c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -102,7 +100,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   flex-direction: row;
 }
 
-.c4 {
+.c5 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -128,7 +126,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   transform: translateY(-50%);
 }
 
-.c7 {
+.c8 {
   display: inline-block;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -144,14 +142,14 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   justify-content: flex-end;
 }
 
-.c6 {
+.c7 {
   display: inline-block;
   padding: 0 1.125rem;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
 }
 
-.c8 {
+.c9 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
   -webkit-flex-grow: 1;
@@ -162,7 +160,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   flex-basis: 5.625rem;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -175,6 +173,11 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
+.c1 {
+  margin-right: 1.125rem;
+  margin-bottom: 1.125rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -186,15 +189,11 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  -webkit-box-pack: space-between;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: space-between;
-  justify-content: space-between;
   margin-top: 2.25rem;
 }
 
 @media only screen and (min-width:0em) {
-  .c3 {
+  .c4 {
     -webkit-flex-basis: 50%;
     -ms-flex-basis: 50%;
     flex-basis: 50%;
@@ -206,1169 +205,79 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
 <ul
   className="c0"
 >
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.016
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 0.256
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 0.25
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 0.1
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Compute Optimized
               </span>
@@ -1378,1169 +287,79 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.033
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 0.768
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 0.5
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 0.25
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Compute Optimized
               </span>
@@ -2550,1169 +369,79 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.066
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 1.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 1
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 0.5
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Compute Optimized
               </span>
@@ -3722,1169 +451,79 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.131
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 3.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 2
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 1
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Compute Optimized
               </span>
@@ -4894,1169 +533,79 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.263
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 7.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 4
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 2
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Compute Optimized
               </span>
@@ -6066,1169 +615,79 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.525
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 15.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 8
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 4
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Compute Optimized
               </span>
@@ -7238,1169 +697,79 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.084
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 3.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 1
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 0.5
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 General Purpose
               </span>
@@ -8410,1169 +779,79 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.166
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 7.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 2
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 1
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 General Purpose
               </span>
@@ -9582,1169 +861,79 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.333
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 15.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 4
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 2
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 General Purpose
               </span>
@@ -10754,1169 +943,79 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.665
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 31.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 8
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 4
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 General Purpose
               </span>
@@ -11926,1169 +1025,79 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.259
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 15.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 2
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 1
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Memory Optimized
               </span>
@@ -13098,1169 +1107,79 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.52
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 31.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 4
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 2
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Memory Optimized
               </span>
@@ -14270,1169 +1189,79 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               1.039
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 63.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 8
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 4
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Memory Optimized
               </span>
@@ -15442,1169 +1271,79 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               1.066
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 31.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 4
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 8
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Storage Optimized
               </span>
@@ -16614,1169 +1353,79 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               2.31
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 63.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 8
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 16
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Storage Optimized
               </span>
@@ -17786,1169 +1435,79 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.413
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 15.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 2
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 12
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Storage Optimized
               </span>
@@ -18958,1169 +1517,79 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               0.825
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 31.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 4
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 24
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Storage Optimized
               </span>
@@ -20130,1169 +1599,79 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
       </div>
     </div>
   </li>
-  .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<li>
-    .c2 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c4 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  position: relative;
-  height: auto;
-  min-height: 7.875rem;
-  margin-bottom: 0.625rem;
-  border: 0.0625rem solid;
-  background-color: ;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-right: 0rem;
-  margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
-  background: ;
-  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
-  min-height: 11.5625rem;
-  min-width: 200px;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c5 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c8 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c2 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
+  <li>
+    <div
+      className="c1 c2"
       name="card"
     >
-      .c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-        className="c0"
+      <div
+        className="c3"
         name="card-view"
       >
-        .c0 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-          className="c0"
+        <div
+          className="c4"
           name="card-meta"
         >
-          .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-            className="c0"
+          <div
+            className="c5"
           >
-            .c0 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-              className="c0"
+            <div
+              className="c6"
               name="card-title"
             >
               $
               1.75
                per hour
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 63.8
                  GB RAM
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 8
                  vCPUs
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 49
                  TB disk
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c7 c6"
               name="card-subtitle"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-                className="c0"
+              <span
+                className="c8"
               >
                 SSD
               </span>
             </div>
-            .c1 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-              className="c0 c1"
+            <div
+              className="c9 c6"
               name="card-footer"
             >
-              .c0 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-                className="c0"
+              <span
+                className="c10"
               >
                 Storage Optimized
               </span>
diff --git a/packages/my-joyent/src/state/actions.js b/packages/my-joyent/src/state/actions.js
index c72df6e7..48a09750 100644
--- a/packages/my-joyent/src/state/actions.js
+++ b/packages/my-joyent/src/state/actions.js
@@ -1,8 +1,8 @@
-const changeFilters = filters => {
-  return {
-    type: 'CHANGE_FILTERS',
-    filters
-  };
-};
+export const changeFilters = filters => ({
+  type: 'CHANGE_FILTERS',
+  filters
+});
 
-export default changeFilters;
+export const resetFilters = () => ({
+  type: 'RESET_FILTERS'
+});
diff --git a/packages/my-joyent/src/state/filterReducer.js b/packages/my-joyent/src/state/filterReducer.js
index ffe34bba..de56ffd9 100644
--- a/packages/my-joyent/src/state/filterReducer.js
+++ b/packages/my-joyent/src/state/filterReducer.js
@@ -1,11 +1,16 @@
 import { default as defaultState } from './state';
+
+const selectedGroups = groups =>
+  groups.filter(group => group.selected).map(group => group.name);
+
 const filterReducer = (state = defaultState, action) => {
   switch (action.type) {
     case 'CHANGE_FILTERS':
-      console.log(state);
       return {
         ...state,
-        ...action.filters,
+        filters: {
+          ...action.filters
+        },
         packages: defaultState.packages
           .filter(
             pack =>
@@ -27,6 +32,21 @@ const filterReducer = (state = defaultState, action) => {
               pack.price >= action.filters.cost.min &&
               pack.price <= action.filters.cost.max
           )
+          .filter(
+            pack =>
+                selectedGroups(action.filters.groups).length > 0 ? 
+                  selectedGroups(action.filters.groups).includes(pack.group) : 
+                  true
+          )
+      };
+
+    case 'RESET_FILTERS':
+      return {
+        ...state,
+        filters: {
+          ...defaultState.filters
+        },
+        packages: defaultState.packages
       };
     default:
       return state;
diff --git a/packages/my-joyent/src/state/state.js b/packages/my-joyent/src/state/state.js
index d3d65d03..ce426508 100644
--- a/packages/my-joyent/src/state/state.js
+++ b/packages/my-joyent/src/state/state.js
@@ -5,7 +5,13 @@ const state = {
     cpu: { min: 0.25, max: 8 },
     cost: { min: 0.016, max: 2.131 },
     ram: { min: 0.256, max: 63.8 },
-    disk: { min: 0.01, max: 4.9 }
+    disk: { min: 0.01, max: 4.9 },
+    groups: [
+      { name: 'Compute Optimized', selected: false },
+      { name: 'Memory Optimized', selected: false },
+      { name: 'General Purpose', selected: false },
+      { name: 'Storage Optimized', selected: false }
+    ]
   },
   packages
 };
diff --git a/packages/my-joyent/test/mocks/filters.js b/packages/my-joyent/test/mocks/filters.js
index 26a8eebb..38f23e36 100644
--- a/packages/my-joyent/test/mocks/filters.js
+++ b/packages/my-joyent/test/mocks/filters.js
@@ -14,5 +14,11 @@ export default {
   disk: {
     min: 0.01,
     max: 107.26
-  }
+  },
+  groups: [
+    { name: 'Compute Optimized', selected: false },
+    { name: 'Memory Optimized', selected: false },
+    { name: 'General Purpose', selected: false },
+    { name: 'Storage Optimized', selected: false }
+  ]
 };
diff --git a/packages/ui-toolkit/src/button/index.js b/packages/ui-toolkit/src/button/index.js
index 84ae7840..82795957 100644
--- a/packages/ui-toolkit/src/button/index.js
+++ b/packages/ui-toolkit/src/button/index.js
@@ -94,6 +94,7 @@ const style = css`
     color: ${props => props.theme.tertiary};
     background-color: ${props => props.theme.background};
     border-color: ${props => props.theme.grey};
+    font-weight: 600;
 
     &:focus,
     &:hover,
@@ -134,6 +135,10 @@ const style = css`
   `} ${is('rect')`
     border-radius: 0;
   `};
+  ${is('small')`
+      padding: ${remcalc(9)} ${remcalc(18)};
+      font-weight: 600;
+  `};
 `;
 
 const StyledButton = NButton.extend`
@@ -157,7 +162,7 @@ const StyledLink = styled(Link)`
  * @example ./usage.md
  */
 const Button = props => {
-  const { href = '', to = '', loading = false, secondary, tertiary } = props;
+  const { href = '', to = '', loading = false, secondary } = props;
 
   const Views = [
     () => (to ? StyledLink : null),
@@ -168,7 +173,7 @@ const Button = props => {
   const View = Views.reduce((sel, view) => (sel ? sel : view()), null);
 
   const children = loading ? (
-    <StatusLoader secondary={!secondary} tertiary={tertiary} />
+    <StatusLoader secondary={!secondary} />
   ) : (
     props.children
   );
@@ -192,6 +197,7 @@ Button.propTypes = {
   primary: PropTypes.bool,
   secondary: PropTypes.bool,
   tertiary: PropTypes.bool,
+  small: PropTypes.bool,
   /**
    * When used, will give button an active state (Only for tertiary for now)
    */
diff --git a/packages/ui-toolkit/src/card/card.js b/packages/ui-toolkit/src/card/card.js
index 1de0849c..20677bd5 100644
--- a/packages/ui-toolkit/src/card/card.js
+++ b/packages/ui-toolkit/src/card/card.js
@@ -36,13 +36,12 @@ const StyledCard = Row.extend`
   `};
 
   ${is('transparent')`
-    border-radius: ${remcalc(4)}
-    background: 
+    border-radius: 4px;
     border: 1px solid ${props => props.theme.grey};
     background: ${props => props.theme.background};
     box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
     min-height: ${remcalc(185)};
-    min-width: 200px;
+    min-width: 237px;
   `};
 
   ${is('stacked')`
diff --git a/packages/ui-toolkit/src/message/index.js b/packages/ui-toolkit/src/message/index.js
index 96816a80..b1f23991 100644
--- a/packages/ui-toolkit/src/message/index.js
+++ b/packages/ui-toolkit/src/message/index.js
@@ -15,6 +15,7 @@ const StyledContainer = styled.div`
   background-color: ${props => props.theme.white};
   box-shadow: ${bottomShaddow};
   border: ${border.confirmed};
+  width: 100%;
 `;
 
 const StyledColor = styled.div`
@@ -74,9 +75,9 @@ Message.propTypes = {
   title: PropTypes.string,
   message: PropTypes.string,
   onCloseClick: PropTypes.func,
-  error: PropTypes.boolean,
-  warning: PropTypes.boolean,
-  success: PropTypes.boolean
+  error: PropTypes.bool,
+  warning: PropTypes.bool,
+  success: PropTypes.bool
 };
 
 export default Message;