@comicrelief/component-library 8.51.4 → 8.51.6

package/dist/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly with data prop 1`] = `
-.c9 {
+.c11 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
   text-transform: inherit;
@@ -13,32 +13,32 @@ exports[`renders correctly with data prop 1`] = `
   line-height: 1.25rem;
 }
 
-.c9 span {
+.c11 span {
   font-size: inherit;
   line-height: inherit;
 }
 
-.c5 {
+.c6 {
   display: block;
   width: 100%;
   height: 100%;
   position: relative;
 }
 
-.c6 {
+.c7 {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
 }
 
-.c17 {
+.c18 {
   display: inline-block;
   color: #FFFFFF;
   fill: currentColor;
 }
 
-.c4 {
+.c5 {
   width: 100%;
   overflow: hidden;
   -webkit-flex-shrink: 0;
@@ -48,14 +48,14 @@ exports[`renders correctly with data prop 1`] = `
   border-radius: 1rem 1rem 0 0;
 }
 
-.c4 img {
+.c5 img {
   width: 100%;
   height: auto;
   object-fit: cover;
   display: block;
 }
 
-.c12 {
+.c14 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
   text-transform: inherit;
@@ -65,7 +65,7 @@ exports[`renders correctly with data prop 1`] = `
   letter-spacing: 0;
   font-size: 1rem;
   line-height: 1.25rem;
-  color: #969598;
+  color: #E52630;
   font-weight: bold;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -73,7 +73,7 @@ exports[`renders correctly with data prop 1`] = `
   display: inline-block;
 }
 
-.c14 {
+.c16 {
   height: 4px;
   width: 100%;
   position: absolute;
@@ -85,11 +85,11 @@ exports[`renders correctly with data prop 1`] = `
   pointer-events: none;
 }
 
-.c16 {
+.c17 {
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: #969598;
+  background: #E52630;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -107,7 +107,7 @@ exports[`renders correctly with data prop 1`] = `
   flex-shrink: 0;
 }
 
-.c2 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -130,17 +130,14 @@ exports[`renders correctly with data prop 1`] = `
   box-sizing: border-box;
 }
 
-.c2 img {
-  -webkit-transform: scale(1.02);
-  -ms-transform: scale(1.02);
-  transform: scale(1.02);
-  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
-  -webkit-transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
-  transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+.c3 img {
+  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.22,1,0.36,1);
+  -webkit-transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
+  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
 }
 
-.c1 {
-  width: 100%;
+.c2 {
+  width: auto;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -158,7 +155,7 @@ exports[`renders correctly with data prop 1`] = `
   max-width: 100%;
 }
 
-.c7 {
+.c8 {
   width: 100%;
   background: #FFFFFF;
   display: -webkit-box;
@@ -176,7 +173,7 @@ exports[`renders correctly with data prop 1`] = `
   border-radius: 0 0 1rem 1rem;
 }
 
-.c8 {
+.c9 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -191,6 +188,12 @@ exports[`renders correctly with data prop 1`] = `
 }
 
 .c10 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-size: 14px;
+  color: #969598;
+}
+
+.c12 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -214,6 +217,12 @@ exports[`renders correctly with data prop 1`] = `
 .c0 {
   padding-top: 1rem;
   padding-bottom: 2rem;
+  padding-inline: 1rem;
+  width: 100%;
+  background: transparent;
+}
+
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -221,34 +230,24 @@ exports[`renders correctly with data prop 1`] = `
   width: 100%;
   max-width: 1152px;
   margin: 0 auto;
-  background: transparent;
-}
-
-.c0 img {
-  -webkit-transform: scale(1.02);
-  -ms-transform: scale(1.02);
-  transform: scale(1.02);
-  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
-  -webkit-transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
-  transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
 }
 
 @media (min-width:740px) {
-  .c9 {
+  .c11 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c9 {
+  .c11 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:740px) {
-  .c4 {
+  .c5 {
     width: calc(100% / 3);
     min-width: 292px;
     max-width: 309px;
@@ -265,60 +264,54 @@ exports[`renders correctly with data prop 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c4 {
+  .c5 {
     min-width: 355px;
     max-width: 362px;
   }
 }
 
 @media (min-width:1440px) {
-  .c4 {
+  .c5 {
     min-width: 363px;
     max-width: 363px;
   }
 }
 
 @media (min-width:740px) {
-  .c4 img {
+  .c5 img {
     height: 100%;
     object-fit: cover;
   }
 }
 
 @media (min-width:740px) {
-  .c4 img {
-    -webkit-transition: -webkit-transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
-    -webkit-transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
-    transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
-    -webkit-transform-origin: center;
-    -ms-transform-origin: center;
-    transform-origin: center;
+  .c14 {
+    font-size: 1rem;
+    line-height: 1.25rem;
   }
+}
 
-  .c4 img:hover,
-  .c4 img:focus {
-    -webkit-transform: scale(1.08);
-    -ms-transform: scale(1.08);
-    transform: scale(1.08);
+@media (min-width:1024px) {
+  .c14 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
   }
 }
 
-@media (min-width:740px) {
-  .c12 {
-    font-size: 1rem;
-    line-height: 1.25rem;
+@media (min-width:1024px) {
+  .c14 {
+    color: #222222;
   }
 }
 
 @media (min-width:1024px) {
-  .c12 {
-    font-size: 1.125rem;
-    line-height: 1.375rem;
+  .c17 {
+    background: #222222;
   }
 }
 
 @media (min-width:740px) {
-  .c2 {
+  .c3 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -331,13 +324,13 @@ exports[`renders correctly with data prop 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c2 {
-    min-height: calc(272px - 4rem);
+  .c3 {
+    min-height: 272px;
   }
 }
 
 @media (min-width:740px) {
-  .c2 {
+  .c3 {
     -webkit-transition: -webkit-transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
     -webkit-transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
     transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
@@ -346,40 +339,35 @@ exports[`renders correctly with data prop 1`] = `
     transform-origin: center;
   }
 
-  .c2:hover,
-  .c2:focus {
-    -webkit-transform: translateY(-0.02px);
-    -ms-transform: translateY(-0.02px);
-    transform: translateY(-0.02px);
+  .c3:hover,
+  .c3:focus {
+    -webkit-transform: translateY(-10px);
+    -ms-transform: translateY(-10px);
+    transform: translateY(-10px);
   }
 
-  .c2:hover {
+  .c3:hover {
     box-shadow: 0 0 1.5rem rgba(0,0,0,0.25);
   }
 
-  .c2:hover .c3 img {
-    -webkit-transform: scale(1.1);
-    -ms-transform: scale(1.1);
-    transform: scale(1.1);
+  .c3:hover .c4 img {
+    -webkit-transform: scale(1.11);
+    -ms-transform: scale(1.11);
+    transform: scale(1.11);
   }
 
-  .c2:hover .c11 {
-    color: #E52630;
+  .c3:hover .c13 {
     -webkit-text-decoration: none;
     text-decoration: none;
   }
 
-  .c2:hover .c13 {
+  .c3:hover .c15 {
     opacity: 1;
   }
-
-  .c2:hover .c15 {
-    background: #E52630;
-  }
 }
 
 @media (min-width:740px) {
-  .c1 {
+  .c2 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -389,7 +377,7 @@ exports[`renders correctly with data prop 1`] = `
 }
 
 @media (min-width:1440px) {
-  .c1 {
+  .c2 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -399,7 +387,7 @@ exports[`renders correctly with data prop 1`] = `
 }
 
 @media (min-width:740px) {
-  .c7 {
+  .c8 {
     width: calc(200% / 3);
     min-width: 384px;
     max-width: 650px;
@@ -411,107 +399,128 @@ exports[`renders correctly with data prop 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c7 {
+  .c8 {
     min-width: 541px;
     max-width: 790px;
   }
 }
 
 @media (min-width:1440px) {
-  .c7 {
+  .c8 {
     width: 789px;
   }
 }
 
+@media (min-width:740px) {
+  .c0 {
+    padding-inline: 2rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    padding-inline: 4rem;
+  }
+}
+
 <div
   className="c0"
 >
   <div
     className="c1"
   >
-    <a
+    <div
       className="c2"
-      href="/test"
-      rel={null}
-      target="self"
     >
-      <div
-        className="c3 c4"
+      <a
+        className="c3"
+        href="/test"
+        rel={null}
+        target="self"
       >
         <div
-          className="c5 lazyload"
-          height="100%"
-          width="100%"
+          className="c4 c5"
         >
-          <img
-            alt="Example image"
+          <div
             className="c6 lazyload"
-            data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
-            data-sizes="auto"
-            data-src="https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg"
-            data-srcset="https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&q=80&fm=webp 678w"
             height="100%"
-            src="https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg"
-            srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             width="100%"
-          />
+          >
+            <img
+              alt="Example image"
+              className="c7 lazyload"
+              data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
+              data-sizes="auto"
+              data-src="https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg"
+              data-srcset="https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&q=80&fm=webp 678w"
+              height="100%"
+              src="https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg"
+              srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+              width="100%"
+            />
+          </div>
         </div>
-      </div>
-      <div
-        className="c7"
-      >
         <div
           className="c8"
         >
-          <p
+          <div
             className="c9"
           >
-            <strong>
-              Single Card
-            </strong>
-             content here
-          </p>
-        </div>
-        <div
-          className="c10"
-        >
-          <span
-            className="c11 c12"
-          >
-            Learn more
-            <img
-              alt=""
-              aria-hidden="true"
-              className="c13 c14"
-              src="mock.asset"
-            />
-          </span>
+            <div
+              className="c10"
+            >
+              Example Label
+            </div>
+            <p
+              className="c11"
+            >
+              <strong>
+                Single Card
+              </strong>
+               content here
+            </p>
+          </div>
           <div
-            className="c15 c16"
+            className="c12"
           >
-            <svg
-              className="c17"
-              fill="none"
-              height="13"
-              viewBox="0 0 15 13"
-              width="15"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              className="c13 c14"
             >
-              <path
-                d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
-                fill="currentColor"
+              Learn more
+              <img
+                alt=""
+                aria-hidden="true"
+                className="c15 c16"
+                src="mock.asset"
               />
-            </svg>
+            </span>
+            <div
+              className="c17"
+            >
+              <svg
+                className="c18"
+                fill="none"
+                height="13"
+                viewBox="0 0 15 13"
+                width="15"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
           </div>
         </div>
-      </div>
-    </a>
+      </a>
+    </div>
   </div>
 </div>
 `;
 
 exports[`renders correctly without image 1`] = `
-.c5 {
+.c7 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
   text-transform: inherit;
@@ -523,18 +532,18 @@ exports[`renders correctly without image 1`] = `
   line-height: 1.25rem;
 }
 
-.c5 span {
+.c7 span {
   font-size: inherit;
   line-height: inherit;
 }
 
-.c13 {
+.c14 {
   display: inline-block;
   color: #FFFFFF;
   fill: currentColor;
 }
 
-.c8 {
+.c10 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
   text-transform: inherit;
@@ -544,7 +553,7 @@ exports[`renders correctly without image 1`] = `
   letter-spacing: 0;
   font-size: 1rem;
   line-height: 1.25rem;
-  color: #969598;
+  color: #E52630;
   font-weight: bold;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -552,7 +561,7 @@ exports[`renders correctly without image 1`] = `
   display: inline-block;
 }
 
-.c10 {
+.c12 {
   height: 4px;
   width: 100%;
   position: absolute;
@@ -564,11 +573,11 @@ exports[`renders correctly without image 1`] = `
   pointer-events: none;
 }
 
-.c12 {
+.c13 {
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: #969598;
+  background: #E52630;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -586,7 +595,7 @@ exports[`renders correctly without image 1`] = `
   flex-shrink: 0;
 }
 
-.c2 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -609,17 +618,14 @@ exports[`renders correctly without image 1`] = `
   box-sizing: border-box;
 }
 
-.c2 img {
-  -webkit-transform: scale(1.02);
-  -ms-transform: scale(1.02);
-  transform: scale(1.02);
-  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
-  -webkit-transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
-  transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+.c3 img {
+  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.22,1,0.36,1);
+  -webkit-transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
+  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
 }
 
-.c1 {
-  width: 100%;
+.c2 {
+  width: auto;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -637,7 +643,7 @@ exports[`renders correctly without image 1`] = `
   max-width: 100%;
 }
 
-.c3 {
+.c4 {
   width: 100%;
   background: #FFFFFF;
   display: -webkit-box;
@@ -655,7 +661,7 @@ exports[`renders correctly without image 1`] = `
   border-radius: 0 0 1rem 1rem;
 }
 
-.c4 {
+.c5 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -670,6 +676,12 @@ exports[`renders correctly without image 1`] = `
 }
 
 .c6 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-size: 14px;
+  color: #969598;
+}
+
+.c8 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -693,6 +705,12 @@ exports[`renders correctly without image 1`] = `
 .c0 {
   padding-top: 1rem;
   padding-bottom: 2rem;
+  padding-inline: 1rem;
+  width: 100%;
+  background: transparent;
+}
+
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -700,48 +718,50 @@ exports[`renders correctly without image 1`] = `
   width: 100%;
   max-width: 1152px;
   margin: 0 auto;
-  background: transparent;
-}
-
-.c0 img {
-  -webkit-transform: scale(1.02);
-  -ms-transform: scale(1.02);
-  transform: scale(1.02);
-  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
-  -webkit-transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
-  transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
 }
 
 @media (min-width:740px) {
-  .c5 {
+  .c7 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c5 {
+  .c7 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:740px) {
-  .c8 {
+  .c10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c8 {
+  .c10 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 }
 
+@media (min-width:1024px) {
+  .c10 {
+    color: #222222;
+  }
+}
+
+@media (min-width:1024px) {
+  .c13 {
+    background: #222222;
+  }
+}
+
 @media (min-width:740px) {
-  .c2 {
+  .c3 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -754,13 +774,13 @@ exports[`renders correctly without image 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c2 {
-    min-height: calc(272px - 4rem);
+  .c3 {
+    min-height: 272px;
   }
 }
 
 @media (min-width:740px) {
-  .c2 {
+  .c3 {
     -webkit-transition: -webkit-transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
     -webkit-transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
     transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
@@ -769,34 +789,29 @@ exports[`renders correctly without image 1`] = `
     transform-origin: center;
   }
 
-  .c2:hover,
-  .c2:focus {
-    -webkit-transform: translateY(-0.02px);
-    -ms-transform: translateY(-0.02px);
-    transform: translateY(-0.02px);
+  .c3:hover,
+  .c3:focus {
+    -webkit-transform: translateY(-10px);
+    -ms-transform: translateY(-10px);
+    transform: translateY(-10px);
   }
 
-  .c2:hover {
+  .c3:hover {
     box-shadow: 0 0 1.5rem rgba(0,0,0,0.25);
   }
 
-  .c2:hover .c7 {
-    color: #E52630;
+  .c3:hover .c9 {
     -webkit-text-decoration: none;
     text-decoration: none;
   }
 
-  .c2:hover .c9 {
+  .c3:hover .c11 {
     opacity: 1;
   }
-
-  .c2:hover .c11 {
-    background: #E52630;
-  }
 }
 
 @media (min-width:740px) {
-  .c1 {
+  .c2 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -806,7 +821,7 @@ exports[`renders correctly without image 1`] = `
 }
 
 @media (min-width:1440px) {
-  .c1 {
+  .c2 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -816,7 +831,7 @@ exports[`renders correctly without image 1`] = `
 }
 
 @media (min-width:740px) {
-  .c3 {
+  .c4 {
     width: calc(200% / 3);
     min-width: 384px;
     max-width: 650px;
@@ -828,76 +843,97 @@ exports[`renders correctly without image 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c3 {
+  .c4 {
     min-width: 541px;
     max-width: 790px;
   }
 }
 
 @media (min-width:1440px) {
-  .c3 {
+  .c4 {
     width: 789px;
   }
 }
 
+@media (min-width:740px) {
+  .c0 {
+    padding-inline: 2rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    padding-inline: 4rem;
+  }
+}
+
 <div
   className="c0"
 >
   <div
     className="c1"
   >
-    <a
+    <div
       className="c2"
-      href="/test-no-image"
-      rel={null}
-      target="self"
     >
-      <div
+      <a
         className="c3"
+        href="/test-no-image"
+        rel={null}
+        target="self"
       >
         <div
           className="c4"
         >
-          <p
+          <div
             className="c5"
           >
-            Card without image
-          </p>
-        </div>
-        <div
-          className="c6"
-        >
-          <span
-            className="c7 c8"
-          >
-            View card
-            <img
-              alt=""
-              aria-hidden="true"
-              className="c9 c10"
-              src="mock.asset"
-            />
-          </span>
+            <div
+              className="c6"
+            >
+              Example Label
+            </div>
+            <p
+              className="c7"
+            >
+              Card without image
+            </p>
+          </div>
           <div
-            className="c11 c12"
+            className="c8"
           >
-            <svg
-              className="c13"
-              fill="none"
-              height="13"
-              viewBox="0 0 15 13"
-              width="15"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              className="c9 c10"
             >
-              <path
-                d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
-                fill="currentColor"
+              View card
+              <img
+                alt=""
+                aria-hidden="true"
+                className="c11 c12"
+                src="mock.asset"
               />
-            </svg>
+            </span>
+            <div
+              className="c13"
+            >
+              <svg
+                className="c14"
+                fill="none"
+                height="13"
+                viewBox="0 0 15 13"
+                width="15"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
           </div>
         </div>
-      </div>
-    </a>
+      </a>
+    </div>
   </div>
 </div>
 `;