@comicrelief/component-library 8.77.4 → 8.77.6

package/src/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`] = `
-.c12 {
+.c14 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
   text-transform: inherit;
@@ -10,7 +10,7 @@ exports[`renders correctly with data prop 1`] = `
   line-height: 1.25rem;
 }
 
-.c12 span {
+.c14 span {
   font-size: inherit;
   line-height: inherit;
 }
@@ -28,30 +28,41 @@ exports[`renders correctly with data prop 1`] = `
   text-decoration: none;
 }
 
-.c7 {
+.c9 {
   display: block;
   width: 100%;
   height: 100%;
   position: relative;
 }
 
-.c8 {
+.c10 {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
 }
 
-.c22 {
+.c19 {
+  height: 4px;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -5px;
+  transition: opacity 0.15s 0.1s;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.c24 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+  transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16);
   transform: scale(1);
   transform-origin: center;
 }
 
-.c20 {
+.c22 {
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -63,20 +74,20 @@ exports[`renders correctly with data prop 1`] = `
   overflow: hidden;
 }
 
-.c18 {
+.c20 {
   padding-left: 1rem;
   display: flex;
   align-items: center;
   justify-content: flex-end;
 }
 
-.c23 {
+.c25 {
   display: inline-block;
   color: #FFFFFF;
   fill: currentColor;
 }
 
-.c6 {
+.c8 {
   width: 100%;
   overflow: hidden;
   flex-shrink: 0;
@@ -84,14 +95,14 @@ exports[`renders correctly with data prop 1`] = `
   border-radius: 1rem 1rem 0 0;
 }
 
-.c6 img {
+.c8 img {
   width: 100%;
   height: auto;
   object-fit: cover;
   display: block;
 }
 
-.c15 {
+.c17 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
   text-transform: inherit;
@@ -103,17 +114,17 @@ exports[`renders correctly with data prop 1`] = `
   text-decoration: none;
   position: relative;
   display: inline-block;
+  transition: color 0.35s;
 }
 
-.c17 {
-  height: 4px;
-  width: 100%;
-  position: absolute;
-  left: 0;
-  bottom: -5px;
-  transition: opacity 0.15s 0.1s;
-  opacity: 0;
-  pointer-events: none;
+.c6 {
+  display: inherit;
+  flex-direction: inherit;
+  flex: inherit;
+  border-radius: inherit;
+  overflow: hidden;
+  transition: box-shadow 0.35s;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
 }
 
 .c4 {
@@ -124,16 +135,19 @@ exports[`renders correctly with data prop 1`] = `
   flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
-  box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
   text-decoration: none;
-  overflow: hidden;
   cursor: pointer;
   box-sizing: border-box;
 }
 
-.c4 img {
+.c4:hover .c5,
+.c4:focus .c5 {
+  box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
+}
+
+.c4 .c7 img {
   transform: scale(1);
-  transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+  transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16),box-shadow 0.35s;
 }
 
 .c2 {
@@ -147,7 +161,7 @@ exports[`renders correctly with data prop 1`] = `
   max-width: 100%;
 }
 
-.c9 {
+.c11 {
   width: 100%;
   background: #FFFFFF;
   display: flex;
@@ -158,21 +172,21 @@ exports[`renders correctly with data prop 1`] = `
   border-radius: 0 0 1rem 1rem;
 }
 
-.c10 {
+.c12 {
   flex: 1;
   display: flex;
   flex-direction: column;
   min-height: 0;
 }
 
-.c11 {
+.c13 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-size: 14px;
   color: #969598;
   margin-bottom: 14px;
 }
 
-.c13 {
+.c15 {
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -198,27 +212,27 @@ exports[`renders correctly with data prop 1`] = `
 }
 
 @media (min-width: 740px) {
-  .c12 {
+  .c14 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 1024px) {
-  .c12 {
+  .c14 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 }
 
-@media (min-width:1024px) {
-  .c20 {
+@media (min-width: 1024px) {
+  .c22 {
     background: #222222;
   }
 }
 
 @media (min-width: 740px) {
-  .c6 {
+  .c8 {
     width: calc(100% / 3);
     min-width: 292px;
     max-width: 309px;
@@ -230,42 +244,42 @@ exports[`renders correctly with data prop 1`] = `
 }
 
 @media (min-width: 1024px) {
-  .c6 {
+  .c8 {
     min-width: 355px;
     max-width: 362px;
   }
 }
 
 @media (min-width: 1440px) {
-  .c6 {
+  .c8 {
     min-width: 363px;
     max-width: 363px;
   }
 }
 
 @media (min-width: 740px) {
-  .c6 img {
+  .c8 img {
     height: 100%;
     object-fit: cover;
   }
 }
 
 @media (min-width: 740px) {
-  .c15 {
+  .c17 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 1024px) {
-  .c15 {
+  .c17 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c15 {
+  .c17 {
     color: #222222;
   }
 }
@@ -285,34 +299,63 @@ exports[`renders correctly with data prop 1`] = `
 }
 
 @media (min-width: 740px) {
+  .c4:hover .c16,
+  .c4:focus .c16 {
+    color: #E52630;
+  }
+
+  .c4:hover .c18,
+  .c4:focus .c18 {
+    opacity: 1;
+  }
+
+  .c4:hover .c21 .c23,
+  .c4:focus .c21 .c23 {
+    transform: scale(1.2);
+  }
+}
+
+@media (min-width: 1024px) {
   .c4 {
-    transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
-    transform-origin: center;
+    overflow: visible;
+  }
+
+  .c4 >div {
     transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+    transform-origin: center;
   }
 
-  .c4:hover,
-  .c4:focus {
+  .c4:hover >div,
+  .c4:focus >div {
     transform: translateY(-10px);
   }
 
-  .c4:hover {
-    box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
+  .c4 >.c5 {
+    transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
   }
 
-  .c4:hover .c5 img {
+  .c4:hover .c7 img,
+  .c4:focus .c7 img {
     transform: scale(1.06);
   }
 
-  .c4:hover .c14 {
-    text-decoration: none;
+  .c4:hover .c16,
+  .c4:focus .c16 {
+    color: #E52630;
   }
 
-  .c4:hover .c16 {
+  .c4:hover .c18,
+  .c4:focus .c18 {
     opacity: 1;
   }
 
-  .c4:hover .c19 .c21 {
+  .c4:hover .c21,
+  .c4:focus .c21 {
+    background: #E52630;
+  }
+
+  .c4:hover .c21 .c23,
+  .c4:focus .c21 .c23 {
     transform: scale(1.2);
   }
 }
@@ -334,7 +377,7 @@ exports[`renders correctly with data prop 1`] = `
 }
 
 @media (min-width: 740px) {
-  .c9 {
+  .c11 {
     width: calc(200% / 3);
     min-width: 384px;
     max-width: 650px;
@@ -344,14 +387,14 @@ exports[`renders correctly with data prop 1`] = `
 }
 
 @media (min-width: 1024px) {
-  .c9 {
+  .c11 {
     min-width: 541px;
     max-width: 790px;
   }
 }
 
 @media (min-width: 1440px) {
-  .c9 {
+  .c11 {
     width: 789px;
   }
 }
@@ -390,79 +433,83 @@ exports[`renders correctly with data prop 1`] = `
           className="c5 c6"
         >
           <div
-            className="c7 lazyload"
-            data-testid="PictureWrapper"
-          >
-            <img
-              alt="Example image"
-              className="c8 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"
-              data-testid="Picture"
-              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"
-            />
-          </div>
-        </div>
-        <div
-          className="c9"
-        >
-          <div
-            className="c10"
+            className="c7 c8"
           >
             <div
-              className="c11"
+              className="c9 lazyload"
+              data-testid="PictureWrapper"
             >
-              Example Label
+              <img
+                alt="Example image"
+                className="c10 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"
+                data-testid="Picture"
+                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"
+              />
             </div>
-            <p
-              className="c12"
-            >
-              <strong>
-                Single Card
-              </strong>
-               content here
-            </p>
           </div>
           <div
-            className="c13"
+            className="c11"
           >
-            <span
-              className="c14 c15"
+            <div
+              className="c12"
             >
-              Learn more
-              <img
-                alt=""
-                aria-hidden="true"
-                className="c16 c17"
-                src="mock.asset"
-              />
-            </span>
+              <div
+                className="c13"
+              >
+                Example Label
+              </div>
+              <p
+                className="c14"
+              >
+                <strong>
+                  Single Card
+                </strong>
+                 content here
+              </p>
+            </div>
             <div
-              className="c18"
+              className="c15"
             >
+              <span
+                className="c16 c17"
+              >
+                Learn more
+                <img
+                  alt=""
+                  aria-hidden="true"
+                  className="c18 c19"
+                  src="mock.asset"
+                />
+              </span>
               <div
-                className="c19 c20"
+                className="c20"
               >
-                <span
+                <div
                   className="c21 c22"
                 >
-                  <svg
-                    className="c23"
-                    fill="none"
-                    height="15"
-                    viewBox="0 0 15 15"
-                    width="15"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <span
+                    className="c23 c24"
                   >
-                    <path
-                      d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </span>
+                    <svg
+                      className="c25"
+                      fill="none"
+                      height="15"
+                      viewBox="0 0 15 15"
+                      width="15"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -474,7 +521,7 @@ exports[`renders correctly with data prop 1`] = `
 `;
 
 exports[`renders correctly without image 1`] = `
-.c8 {
+.c10 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
   text-transform: inherit;
@@ -483,7 +530,7 @@ exports[`renders correctly without image 1`] = `
   line-height: 1.25rem;
 }
 
-.c8 span {
+.c10 span {
   font-size: inherit;
   line-height: inherit;
 }
@@ -501,16 +548,27 @@ exports[`renders correctly without image 1`] = `
   text-decoration: none;
 }
 
-.c18 {
+.c15 {
+  height: 4px;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -5px;
+  transition: opacity 0.15s 0.1s;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.c20 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+  transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16);
   transform: scale(1);
   transform-origin: center;
 }
 
-.c16 {
+.c18 {
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -522,20 +580,20 @@ exports[`renders correctly without image 1`] = `
   overflow: hidden;
 }
 
-.c14 {
+.c16 {
   padding-left: 1rem;
   display: flex;
   align-items: center;
   justify-content: flex-end;
 }
 
-.c19 {
+.c21 {
   display: inline-block;
   color: #FFFFFF;
   fill: currentColor;
 }
 
-.c11 {
+.c13 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
   text-transform: inherit;
@@ -547,17 +605,17 @@ exports[`renders correctly without image 1`] = `
   text-decoration: none;
   position: relative;
   display: inline-block;
+  transition: color 0.35s;
 }
 
-.c13 {
-  height: 4px;
-  width: 100%;
-  position: absolute;
-  left: 0;
-  bottom: -5px;
-  transition: opacity 0.15s 0.1s;
-  opacity: 0;
-  pointer-events: none;
+.c6 {
+  display: inherit;
+  flex-direction: inherit;
+  flex: inherit;
+  border-radius: inherit;
+  overflow: hidden;
+  transition: box-shadow 0.35s;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
 }
 
 .c4 {
@@ -568,16 +626,14 @@ exports[`renders correctly without image 1`] = `
   flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
-  box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
   text-decoration: none;
-  overflow: hidden;
   cursor: pointer;
   box-sizing: border-box;
 }
 
-.c4 img {
-  transform: scale(1);
-  transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+.c4:hover .c5,
+.c4:focus .c5 {
+  box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
 }
 
 .c2 {
@@ -591,7 +647,7 @@ exports[`renders correctly without image 1`] = `
   max-width: 100%;
 }
 
-.c5 {
+.c7 {
   width: 100%;
   background: #FFFFFF;
   display: flex;
@@ -602,21 +658,21 @@ exports[`renders correctly without image 1`] = `
   border-radius: 0 0 1rem 1rem;
 }
 
-.c6 {
+.c8 {
   flex: 1;
   display: flex;
   flex-direction: column;
   min-height: 0;
 }
 
-.c7 {
+.c9 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-size: 14px;
   color: #969598;
   margin-bottom: 14px;
 }
 
-.c9 {
+.c11 {
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -642,41 +698,41 @@ exports[`renders correctly without image 1`] = `
 }
 
 @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) {
-  .c16 {
+@media (min-width: 1024px) {
+  .c18 {
     background: #222222;
   }
 }
 
 @media (min-width: 740px) {
-  .c11 {
+  .c13 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 1024px) {
-  .c11 {
+  .c13 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c11 {
+  .c13 {
     color: #222222;
   }
 }
@@ -696,30 +752,58 @@ exports[`renders correctly without image 1`] = `
 }
 
 @media (min-width: 740px) {
+  .c4:hover .c12,
+  .c4:focus .c12 {
+    color: #E52630;
+  }
+
+  .c4:hover .c14,
+  .c4:focus .c14 {
+    opacity: 1;
+  }
+
+  .c4:hover .c17 .c19,
+  .c4:focus .c17 .c19 {
+    transform: scale(1.2);
+  }
+}
+
+@media (min-width: 1024px) {
   .c4 {
-    transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
-    transform-origin: center;
+    overflow: visible;
+  }
+
+  .c4 >div {
     transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+    transform-origin: center;
   }
 
-  .c4:hover,
-  .c4:focus {
+  .c4:hover >div,
+  .c4:focus >div {
     transform: translateY(-10px);
   }
 
-  .c4:hover {
-    box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
+  .c4 >.c5 {
+    transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
   }
 
-  .c4:hover .c10 {
-    text-decoration: none;
+  .c4:hover .c12,
+  .c4:focus .c12 {
+    color: #E52630;
   }
 
-  .c4:hover .c12 {
+  .c4:hover .c14,
+  .c4:focus .c14 {
     opacity: 1;
   }
 
-  .c4:hover .c15 .c17 {
+  .c4:hover .c17,
+  .c4:focus .c17 {
+    background: #E52630;
+  }
+
+  .c4:hover .c17 .c19,
+  .c4:focus .c17 .c19 {
     transform: scale(1.2);
   }
 }
@@ -741,7 +825,7 @@ exports[`renders correctly without image 1`] = `
 }
 
 @media (min-width: 740px) {
-  .c5 {
+  .c7 {
     width: calc(200% / 3);
     min-width: 384px;
     max-width: 650px;
@@ -751,14 +835,14 @@ exports[`renders correctly without image 1`] = `
 }
 
 @media (min-width: 1024px) {
-  .c5 {
+  .c7 {
     min-width: 541px;
     max-width: 790px;
   }
 }
 
 @media (min-width: 1440px) {
-  .c5 {
+  .c7 {
     width: 789px;
   }
 }
@@ -794,59 +878,63 @@ exports[`renders correctly without image 1`] = `
         type="standard"
       >
         <div
-          className="c5"
+          className="c5 c6"
         >
           <div
-            className="c6"
+            className="c7"
           >
             <div
-              className="c7"
-            >
-              Example Label
-            </div>
-            <p
               className="c8"
             >
-              Card without image
-            </p>
-          </div>
-          <div
-            className="c9"
-          >
-            <span
-              className="c10 c11"
-            >
-              View card
-              <img
-                alt=""
-                aria-hidden="true"
-                className="c12 c13"
-                src="mock.asset"
-              />
-            </span>
+              <div
+                className="c9"
+              >
+                Example Label
+              </div>
+              <p
+                className="c10"
+              >
+                Card without image
+              </p>
+            </div>
             <div
-              className="c14"
+              className="c11"
             >
+              <span
+                className="c12 c13"
+              >
+                View card
+                <img
+                  alt=""
+                  aria-hidden="true"
+                  className="c14 c15"
+                  src="mock.asset"
+                />
+              </span>
               <div
-                className="c15 c16"
+                className="c16"
               >
-                <span
+                <div
                   className="c17 c18"
                 >
-                  <svg
-                    className="c19"
-                    fill="none"
-                    height="15"
-                    viewBox="0 0 15 15"
-                    width="15"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <span
+                    className="c19 c20"
                   >
-                    <path
-                      d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </span>
+                    <svg
+                      className="c21"
+                      fill="none"
+                      height="15"
+                      viewBox="0 0 15 15"
+                      width="15"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </div>
               </div>
             </div>
           </div>