@comicrelief/component-library 8.25.8 → 8.26.0

package/dist/components/Atoms/Picture/Picture.js

@@ -1,12 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 require("lazysizes");
@@ -18,10 +18,9 @@ const Wrapper = _styledComponents.default.div.withConfig({
   componentId: "sc-1x3z81z-0"
 })(["", ";display:block;width:", ";height:", ";position:relative;", ";"], _ref => {
   let {
-    objFitState,
     nonObjFitImage
   } = _ref;
-  return !objFitState && nonObjFitImage && "background-image: url(".concat(nonObjFitImage, "); background-size: cover; background-position: center;");
+  return nonObjFitImage && "@supports not ((object-fit: cover) or (object-fit: none) or (object-fit: contain)) {\n        background-image: url(".concat(nonObjFitImage, ");\n        background-size: cover;\n        background-position: center;\n      }\n  ");
 }, props => props.width ? props.width : '100%', props => props.height ? props.height : '100%', _ref2 => {
   let {
     isBackgroundImage
@@ -31,12 +30,11 @@ const Wrapper = _styledComponents.default.div.withConfig({
 const Image = _styledComponents.default.img.withConfig({
   displayName: "Picture__Image",
   componentId: "sc-1x3z81z-1"
-})(["width:", ";height:", ";display:block;object-fit:", ";", ";", " ", " ", ""], props => props.width ? props.width : '100%', props => props.height ? props.height : 'auto', props => props.objectFit === 'none' && 'none' || props.objectFit === 'cover' && 'cover' || props.objectFit === 'contain' && 'contain', _ref3 => {
+})(["width:", ";height:", ";display:block;object-fit:", ";", " ", " ", " ", ""], props => props.width ? props.width : '100%', props => props.height ? props.height : 'auto', props => props.objectFit === 'none' && 'none' || props.objectFit === 'cover' && 'cover' || props.objectFit === 'contain' && 'contain', _ref3 => {
   let {
-    objectFit,
-    objFitState
+    objectFit
   } = _ref3;
-  return objectFit !== 'none' && !objFitState && 'visibility: hidden;';
+  return objectFit !== 'none' && "@supports not ((object-fit: cover) or (object-fit: contain)) {\n      visibility: hidden;\n    ";
 }, _ref4 => {
   let {
     smallBreakpointRowLayout
@@ -90,15 +88,7 @@ const Picture = _ref11 => {
     mediumBreakpointRowLayout = null,
     ...rest
   } = _ref11;
-  const document = typeof window !== 'undefined' ? window.document : null;
-  const [objFitState, setObjFitState] = (0, _react.useState)(true);
   let nonObjFitImage = null;
-  (0, _react.useEffect)(() => {
-    // Once document is available, determine if this browser supports object-fit
-    if ('objectFit' in document.documentElement.style === false) {
-      setObjFitState(false);
-    }
-  }, [document]);
 
   // Determine which image will be used for the nonObjectFit fallback
   if (image) {
@@ -113,16 +103,14 @@ const Picture = _ref11 => {
       image: image,
       images: images,
       isBackgroundImage: isBackgroundImage,
-      nonObjFitImage: nonObjFitImage,
-      objFitState: objFitState
+      nonObjFitImage: nonObjFitImage
     }, rest), /*#__PURE__*/_react.default.createElement(Image, {
       alt: alt,
       height: height,
       width: width,
       objectFit: objectFit,
       "data-src": image,
-      className: "lazyload",
-      objFitState: objFitState
+      className: "lazyload"
     }));
   }
   return /*#__PURE__*/_react.default.createElement(Wrapper, Object.assign({
@@ -130,11 +118,9 @@ const Picture = _ref11 => {
     width: width,
     image: image,
     images: images,
-    setObjFitState: setObjFitState,
     className: "lazyload",
     isBackgroundImage: isBackgroundImage,
-    nonObjFitImage: nonObjFitImage,
-    objFitState: objFitState
+    nonObjFitImage: nonObjFitImage
   }, rest), /*#__PURE__*/_react.default.createElement(Image, {
     alt: alt,
     height: height,
@@ -147,7 +133,6 @@ const Picture = _ref11 => {
     "data-sizes": "auto",
     "data-lowsrc": imageLow,
     className: "lazyload",
-    objFitState: objFitState,
     smallBreakpointRowLayout: smallBreakpointRowLayout,
     mediumBreakpointRowLayout: mediumBreakpointRowLayout
   }));

package/dist/components/Atoms/Picture/Picture.test.js

@@ -6,15 +6,15 @@ require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/shallowWithTheme"));
 var _Picture = _interopRequireDefault(require("./Picture"));
 var _data = require("../../../styleguide/data/data");
-it("renders correctly", () => {
+it('renders correctly', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Picture.default, {
     images: _data.defaultData.images,
     image: _data.defaultData.image,
     alt: "Test images"
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: block;\n      width: 100%;\n      height: auto;\n      position: relative;\n    }\n\n    .c1 {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: none;\n    }\n\n    <div\n      className=\"c0 lazyload\"\n      height=\"auto\"\n      width=\"100%\"\n    >\n      <img\n        alt=\"Test images\"\n        className=\"c1 lazyload\"\n        data-lowsrc={null}\n        data-sizes=\"auto\"\n        data-src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n        height=\"auto\"\n        src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n        width=\"100%\"\n      />\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: block;\n      width: 100%;\n      height: auto;\n      position: relative;\n    }\n\n    .c1 {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: none;\n    }\n\n    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {\n      .c0 {\n        background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);\n        background-size: cover;\n        background-position: center;\n      }\n    }\n\n    <div\n      className=\"c0 lazyload\"\n      height=\"auto\"\n      width=\"100%\"\n    >\n      <img\n        alt=\"Test images\"\n        className=\"c1 lazyload\"\n        data-lowsrc={null}\n        data-sizes=\"auto\"\n        data-src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n        height=\"auto\"\n        src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n        width=\"100%\"\n      />\n    </div>\n  ");
 });
-it("renders correctly with custom props", () => {
+it('renders correctly with custom props', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Picture.default, {
     images: _data.defaultData.images,
     image: _data.defaultData.image,
@@ -23,5 +23,5 @@ it("renders correctly with custom props", () => {
     height: "100px",
     alt: "Test images"
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: block;\n      width: 200px;\n      height: 100px;\n      position: relative;\n    }\n\n    .c1 {\n      width: 200px;\n      height: 100px;\n      display: block;\n      object-fit: cover;\n    }\n\n    <div\n      className=\"c0 lazyload\"\n      height=\"100px\"\n      width=\"200px\"\n    >\n      <img\n        alt=\"Test images\"\n        className=\"c1 lazyload\"\n        data-lowsrc={null}\n        data-sizes=\"auto\"\n        data-src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n        height=\"100px\"\n        src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n        width=\"200px\"\n      />\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: block;\n      width: 200px;\n      height: 100px;\n      position: relative;\n    }\n\n    .c1 {\n      width: 200px;\n      height: 100px;\n      display: block;\n      object-fit: cover;\n    }\n\n    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {\n      .c0 {\n        background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);\n        background-size: cover;\n        background-position: center;\n      }\n    }\n\n    @supports not ((object-fit:cover) or (object-fit:contain)) {\n      .c1 {\n        visibility: hidden;\n      }\n    }\n\n    <div\n      className=\"c0 lazyload\"\n      height=\"100px\"\n      width=\"200px\"\n    >\n      <img\n        alt=\"Test images\"\n        className=\"c1 lazyload\"\n        data-lowsrc={null}\n        data-sizes=\"auto\"\n        data-src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n        height=\"100px\"\n        src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n        width=\"200px\"\n      />\n    </div>\n  ");
 });

package/dist/components/Molecules/ArticleTeaser/ArticleTeaser.test.js

@@ -18,7 +18,7 @@ it('renders article teaser correctly', () => {
     smallImageWidth: "25%",
     largeImageWidth: "100%"
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c8 {\n      font-size: 0.75rem;\n      line-height: 0.75rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c10 {\n      font-size: 2rem;\n      line-height: 2rem;\n      text-transform: uppercase;\n      font-weight: normal;\n      line-height: 2rem;\n      font-family: 'Anton',Impact,sans-serif;\n      -webkit-letter-spacing: 0.03rem;\n      -moz-letter-spacing: 0.03rem;\n      -ms-letter-spacing: 0.03rem;\n      letter-spacing: 0.03rem;\n    }\n\n    .c4 {\n      display: block;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .c6 {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c1 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      font-weight: normal;\n    }\n\n    .c1:hover {\n      color: #000000;\n    }\n\n    .c0 {\n      width: 100%;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      background-color: #FFFFFF;\n      border-radius: 1rem;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n      -webkit-transition: all 0.2s;\n      transition: all 0.2s;\n    }\n\n    .c0:hover {\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.3);\n      -webkit-transform: translateY(-4px);\n      -ms-transform: translateY(-4px);\n      transform: translateY(-4px);\n    }\n\n    .c2 {\n      padding: 0;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      height: 100%;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      color: inherit;\n      width: 100%;\n    }\n\n    .c3 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      position: relative;\n    }\n\n    .c3 img {\n      border-radius: 1rem 1rem 0 0;\n    }\n\n    .c7 {\n      padding: 2rem;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n    }\n\n    .c11 {\n      margin: 0;\n    }\n\n    .c9 {\n      display: block;\n      margin-bottom: 1rem;\n    }\n\n    .c5 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n    }\n\n    @media (min-width:740px) {\n      .c2 {\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        -webkit-flex-direction: column;\n        -ms-flex-direction: column;\n        flex-direction: column;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c3 {\n        width: 45%;\n      }\n\n      .c3 img {\n        border-radius: 1rem 0 0 1rem;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c3 {\n        width: 100%;\n      }\n\n      .c3 img {\n        border-radius: 1rem 1rem 0 0;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c7 {\n        width: 55%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c7 {\n        width: 100%;\n      }\n    }\n\n    <article\n      className=\"c0\"\n    >\n      <a\n        className=\"c1 c2\"\n        color=\"red\"\n        href=\"/test\"\n        target=\"_self\"\n        type=\"standard\"\n      >\n        <div\n          className=\"c3\"\n        >\n          <div\n            className=\"c4 c5\"\n            height=\"100%\"\n            width=\"100%\"\n          >\n            <img\n              alt=\"Image's description\"\n              className=\"c6 lazyload\"\n              data-lowsrc={null}\n              data-sizes=\"auto\"\n              data-src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n              data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n              height=\"100%\"\n              src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n              srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n              width=\"100%\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"c7\"\n        >\n          <span\n            className=\"c8 c9\"\n            color=\"inherit\"\n            size=\"xs\"\n          >\n             01 July 2019\n          </span>\n          <h3\n            className=\"c10 c11\"\n            color=\"inherit\"\n            height=\"2rem\"\n            size=\"xl\"\n          >\n            News article\n          </h3>\n        </div>\n      </a>\n    </article>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c8 {\n      font-size: 0.75rem;\n      line-height: 0.75rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c10 {\n      font-size: 2rem;\n      line-height: 2rem;\n      text-transform: uppercase;\n      font-weight: normal;\n      line-height: 2rem;\n      font-family: 'Anton',Impact,sans-serif;\n      -webkit-letter-spacing: 0.03rem;\n      -moz-letter-spacing: 0.03rem;\n      -ms-letter-spacing: 0.03rem;\n      letter-spacing: 0.03rem;\n    }\n\n    .c4 {\n      display: block;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .c6 {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c1 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      font-weight: normal;\n    }\n\n    .c1:hover {\n      color: #000000;\n    }\n\n    .c0 {\n      width: 100%;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      background-color: #FFFFFF;\n      border-radius: 1rem;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n      -webkit-transition: all 0.2s;\n      transition: all 0.2s;\n    }\n\n    .c0:hover {\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.3);\n      -webkit-transform: translateY(-4px);\n      -ms-transform: translateY(-4px);\n      transform: translateY(-4px);\n    }\n\n    .c2 {\n      padding: 0;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      height: 100%;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      color: inherit;\n      width: 100%;\n    }\n\n    .c3 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      position: relative;\n    }\n\n    .c3 img {\n      border-radius: 1rem 1rem 0 0;\n    }\n\n    .c7 {\n      padding: 2rem;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n    }\n\n    .c11 {\n      margin: 0;\n    }\n\n    .c9 {\n      display: block;\n      margin-bottom: 1rem;\n    }\n\n    .c5 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n    }\n\n    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {\n      .c4 {\n        background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);\n        background-size: cover;\n        background-position: center;\n      }\n    }\n\n    @supports not ((object-fit:cover) or (object-fit:contain)) {\n      .c6 {\n        visibility: hidden;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c2 {\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        -webkit-flex-direction: column;\n        -ms-flex-direction: column;\n        flex-direction: column;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c3 {\n        width: 45%;\n      }\n\n      .c3 img {\n        border-radius: 1rem 0 0 1rem;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c3 {\n        width: 100%;\n      }\n\n      .c3 img {\n        border-radius: 1rem 1rem 0 0;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c7 {\n        width: 55%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c7 {\n        width: 100%;\n      }\n    }\n\n    <article\n      className=\"c0\"\n    >\n      <a\n        className=\"c1 c2\"\n        color=\"red\"\n        href=\"/test\"\n        target=\"_self\"\n        type=\"standard\"\n      >\n        <div\n          className=\"c3\"\n        >\n          <div\n            className=\"c4 c5\"\n            height=\"100%\"\n            width=\"100%\"\n          >\n            <img\n              alt=\"Image's description\"\n              className=\"c6 lazyload\"\n              data-lowsrc={null}\n              data-sizes=\"auto\"\n              data-src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n              data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n              height=\"100%\"\n              src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n              srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n              width=\"100%\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"c7\"\n        >\n          <span\n            className=\"c8 c9\"\n            color=\"inherit\"\n            size=\"xs\"\n          >\n             01 July 2019\n          </span>\n          <h3\n            className=\"c10 c11\"\n            color=\"inherit\"\n            height=\"2rem\"\n            size=\"xl\"\n          >\n            News article\n          </h3>\n        </div>\n      </a>\n    </article>\n  ");
 });
 it('renders press realese correctly', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_ArticleTeaser.default, {
@@ -29,5 +29,5 @@ it('renders press realese correctly', () => {
     alt: "Image's description",
     logoSize: "80px"
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c8 {\n      font-size: 0.75rem;\n      line-height: 0.75rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c10 {\n      font-size: 2rem;\n      line-height: 2rem;\n      text-transform: uppercase;\n      font-weight: normal;\n      line-height: 2rem;\n      font-family: 'Anton',Impact,sans-serif;\n      -webkit-letter-spacing: 0.03rem;\n      -moz-letter-spacing: 0.03rem;\n      -ms-letter-spacing: 0.03rem;\n      letter-spacing: 0.03rem;\n    }\n\n    .c4 {\n      display: block;\n      width: 80px;\n      height: 80px;\n      position: relative;\n    }\n\n    .c6 {\n      width: 80px;\n      height: 80px;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c1 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      font-weight: normal;\n    }\n\n    .c1:hover {\n      color: #000000;\n    }\n\n    .c0 {\n      width: 100%;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      background-color: #FFFFFF;\n      border-radius: 1rem;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n      -webkit-transition: all 0.2s;\n      transition: all 0.2s;\n    }\n\n    .c0:hover {\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.3);\n      -webkit-transform: translateY(-4px);\n      -ms-transform: translateY(-4px);\n      transform: translateY(-4px);\n    }\n\n    .c2 {\n      padding: 0;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      height: 100%;\n      -webkit-flex-direction: row;\n      -ms-flex-direction: row;\n      flex-direction: row;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      color: inherit;\n      width: 100%;\n    }\n\n    .c3 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      position: relative;\n      padding-left: 1rem;\n    }\n\n    .c3 img {\n      border-radius: 0;\n    }\n\n    .c7 {\n      padding: 2rem;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n    }\n\n    .c11 {\n      margin: 0;\n    }\n\n    .c9 {\n      display: block;\n      margin-bottom: 1rem;\n    }\n\n    .c5 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n    }\n\n    @media (min-width:740px) {\n      .c2 {\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n\n    }\n\n    @media (min-width:1024px) {\n      .c7 {\n        width: 100%;\n      }\n    }\n\n    <article\n      className=\"c0\"\n    >\n      <a\n        className=\"c1 c2\"\n        color=\"red\"\n        href=\"/test\"\n        target=\"_self\"\n        type=\"standard\"\n      >\n        <div\n          className=\"c3\"\n        >\n          <div\n            className=\"c4 c5\"\n            height=\"80px\"\n            width=\"80px\"\n          >\n            <img\n              alt=\"Image's description\"\n              className=\"c6 lazyload\"\n              data-lowsrc=\"mock.asset\"\n              data-sizes=\"auto\"\n              data-src=\"mock.asset\"\n              data-srcset=\"mock.asset\"\n              height=\"80px\"\n              src=\"mock.asset\"\n              srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n              width=\"80px\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"c7\"\n        >\n          <span\n            className=\"c8 c9\"\n            color=\"inherit\"\n            size=\"xs\"\n          >\n             01 July 2019\n          </span>\n          <h3\n            className=\"c10 c11\"\n            color=\"inherit\"\n            height=\"2rem\"\n            size=\"xl\"\n          >\n            Press Release\n          </h3>\n        </div>\n      </a>\n    </article>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c8 {\n      font-size: 0.75rem;\n      line-height: 0.75rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c10 {\n      font-size: 2rem;\n      line-height: 2rem;\n      text-transform: uppercase;\n      font-weight: normal;\n      line-height: 2rem;\n      font-family: 'Anton',Impact,sans-serif;\n      -webkit-letter-spacing: 0.03rem;\n      -moz-letter-spacing: 0.03rem;\n      -ms-letter-spacing: 0.03rem;\n      letter-spacing: 0.03rem;\n    }\n\n    .c4 {\n      display: block;\n      width: 80px;\n      height: 80px;\n      position: relative;\n    }\n\n    .c6 {\n      width: 80px;\n      height: 80px;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c1 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      font-weight: normal;\n    }\n\n    .c1:hover {\n      color: #000000;\n    }\n\n    .c0 {\n      width: 100%;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      background-color: #FFFFFF;\n      border-radius: 1rem;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n      -webkit-transition: all 0.2s;\n      transition: all 0.2s;\n    }\n\n    .c0:hover {\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.3);\n      -webkit-transform: translateY(-4px);\n      -ms-transform: translateY(-4px);\n      transform: translateY(-4px);\n    }\n\n    .c2 {\n      padding: 0;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      height: 100%;\n      -webkit-flex-direction: row;\n      -ms-flex-direction: row;\n      flex-direction: row;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      color: inherit;\n      width: 100%;\n    }\n\n    .c3 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      position: relative;\n      padding-left: 1rem;\n    }\n\n    .c3 img {\n      border-radius: 0;\n    }\n\n    .c7 {\n      padding: 2rem;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n    }\n\n    .c11 {\n      margin: 0;\n    }\n\n    .c9 {\n      display: block;\n      margin-bottom: 1rem;\n    }\n\n    .c5 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n    }\n\n    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {\n      .c4 {\n        background-image: url(mock.asset);\n        background-size: cover;\n        background-position: center;\n      }\n    }\n\n    @supports not ((object-fit:cover) or (object-fit:contain)) {\n      .c6 {\n        visibility: hidden;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c2 {\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n\n    }\n\n    @media (min-width:1024px) {\n      .c7 {\n        width: 100%;\n      }\n    }\n\n    <article\n      className=\"c0\"\n    >\n      <a\n        className=\"c1 c2\"\n        color=\"red\"\n        href=\"/test\"\n        target=\"_self\"\n        type=\"standard\"\n      >\n        <div\n          className=\"c3\"\n        >\n          <div\n            className=\"c4 c5\"\n            height=\"80px\"\n            width=\"80px\"\n          >\n            <img\n              alt=\"Image's description\"\n              className=\"c6 lazyload\"\n              data-lowsrc=\"mock.asset\"\n              data-sizes=\"auto\"\n              data-src=\"mock.asset\"\n              data-srcset=\"mock.asset\"\n              height=\"80px\"\n              src=\"mock.asset\"\n              srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n              width=\"80px\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"c7\"\n        >\n          <span\n            className=\"c8 c9\"\n            color=\"inherit\"\n            size=\"xs\"\n          >\n             01 July 2019\n          </span>\n          <h3\n            className=\"c10 c11\"\n            color=\"inherit\"\n            height=\"2rem\"\n            size=\"xl\"\n          >\n            Press Release\n          </h3>\n        </div>\n      </a>\n    </article>\n  ");
 });

package/dist/components/Molecules/Card/__snapshots__/Card.test.js.snap

@@ -189,6 +189,12 @@ exports[`renders correctly with no body 1`] = `
   height: auto;
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c3 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:0px) {
   .c0 {
     -webkit-flex-direction: column;

package/dist/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap

@@ -119,6 +119,20 @@ exports[`renders Column view correctly 1`] = `
   z-index: 2;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;
@@ -377,6 +391,20 @@ exports[`renders correctly 1`] = `
   z-index: 2;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;

package/dist/components/Molecules/PartnerLink/PartnerLink.test.js

@@ -15,5 +15,5 @@ it('renders correctly', () => {
     imageLow: _data.defaultData.imageLow,
     images: _data.defaultData.images
   }))).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c4 {\n      color: #FFFFFF;\n      font-size: 0.6875rem;\n      line-height: 0.6875rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c2 {\n      display: block;\n      width: 100%;\n      height: auto;\n      position: relative;\n    }\n\n    .c3 {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: none;\n    }\n\n    .c0 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      border-bottom: 2px solid #000000;\n      font-weight: normal;\n    }\n\n    .c0:hover {\n      color: #000000;\n      border-bottom: 2px solid #000000;\n    }\n\n    .c6 {\n      border: 0;\n      -webkit-clip: rect(0 0 0 0);\n      clip: rect(0 0 0 0);\n      -webkit-clip-path: inset(50%);\n      clip-path: inset(50%);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      white-space: nowrap;\n      width: 1px;\n      height: auto;\n    }\n\n    .c1 {\n      display: block;\n      position: relative;\n      padding: 0;\n      border: none;\n    }\n\n    .c1:hover,\n    .c1:focus {\n      border: none;\n    }\n\n    .c1:hover .c5,\n    .c1:focus .c5 {\n      overflow: inherit;\n      -webkit-clip-path: none;\n      clip-path: none;\n      margin: 0;\n      text-align: center;\n      -webkit-transform: translateY(-50%);\n      -ms-transform: translateY(-50%);\n      transform: translateY(-50%);\n      -webkit-clip: auto;\n      clip: auto;\n      top: 50%;\n      left: 0;\n      width: 100%;\n      z-index: 2;\n    }\n\n    .c1:hover::after,\n    .c1:focus::after {\n      content: '';\n      position: absolute;\n      display: block;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: #E52630;\n    }\n\n    @media (min-width:740px) {\n      .c6 {\n        font-size: 1rem;\n      }\n    }\n\n    <a\n      className=\"c0 c1\"\n      color=\"red\"\n      href=\"https://www.comicrelief.com\"\n      target=\"_self\"\n      type=\"standard\"\n    >\n      <div\n        className=\"c2 lazyload\"\n        height=\"auto\"\n        width=\"100%\"\n      >\n        <img\n          alt=\"test Image\"\n          className=\"c3 lazyload\"\n          data-lowsrc=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=100&h=50&q=100\"\n          data-sizes=\"auto\"\n          data-src={null}\n          data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n          height=\"auto\"\n          src={null}\n          srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n          width=\"100%\"\n        />\n      </div>\n      <span\n        className=\"c4 c5 c6\"\n        color=\"white\"\n        size=\"xxs\"\n      >\n        Find out more\n      </span>\n    </a>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c4 {\n      color: #FFFFFF;\n      font-size: 0.6875rem;\n      line-height: 0.6875rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c2 {\n      display: block;\n      width: 100%;\n      height: auto;\n      position: relative;\n    }\n\n    .c3 {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: none;\n    }\n\n    .c0 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      border-bottom: 2px solid #000000;\n      font-weight: normal;\n    }\n\n    .c0:hover {\n      color: #000000;\n      border-bottom: 2px solid #000000;\n    }\n\n    .c6 {\n      border: 0;\n      -webkit-clip: rect(0 0 0 0);\n      clip: rect(0 0 0 0);\n      -webkit-clip-path: inset(50%);\n      clip-path: inset(50%);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      white-space: nowrap;\n      width: 1px;\n      height: auto;\n    }\n\n    .c1 {\n      display: block;\n      position: relative;\n      padding: 0;\n      border: none;\n    }\n\n    .c1:hover,\n    .c1:focus {\n      border: none;\n    }\n\n    .c1:hover .c5,\n    .c1:focus .c5 {\n      overflow: inherit;\n      -webkit-clip-path: none;\n      clip-path: none;\n      margin: 0;\n      text-align: center;\n      -webkit-transform: translateY(-50%);\n      -ms-transform: translateY(-50%);\n      transform: translateY(-50%);\n      -webkit-clip: auto;\n      clip: auto;\n      top: 50%;\n      left: 0;\n      width: 100%;\n      z-index: 2;\n    }\n\n    .c1:hover::after,\n    .c1:focus::after {\n      content: '';\n      position: absolute;\n      display: block;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: #E52630;\n    }\n\n    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {\n      .c2 {\n        background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);\n        background-size: cover;\n        background-position: center;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c6 {\n        font-size: 1rem;\n      }\n    }\n\n    <a\n      className=\"c0 c1\"\n      color=\"red\"\n      href=\"https://www.comicrelief.com\"\n      target=\"_self\"\n      type=\"standard\"\n    >\n      <div\n        className=\"c2 lazyload\"\n        height=\"auto\"\n        width=\"100%\"\n      >\n        <img\n          alt=\"test Image\"\n          className=\"c3 lazyload\"\n          data-lowsrc=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=100&h=50&q=100\"\n          data-sizes=\"auto\"\n          data-src={null}\n          data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n          height=\"auto\"\n          src={null}\n          srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n          width=\"100%\"\n        />\n      </div>\n      <span\n        className=\"c4 c5 c6\"\n        color=\"white\"\n        size=\"xxs\"\n      >\n        Find out more\n      </span>\n    </a>\n  ");
 });

package/dist/components/Molecules/Promo/__snapshots__/Promo.test.js.snap

@@ -153,6 +153,20 @@ exports[`renders Promo correctly 1`] = `
   }
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c2 {
+    background-image: url(../promo.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c3 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c9 {
     width: auto;
@@ -431,6 +445,20 @@ exports[`renders Promo correctly end position 1`] = `
   }
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c2 {
+    background-image: url(../promo.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c3 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c9 {
     width: auto;

package/dist/components/Molecules/SearchResult/__snapshots__/SearchResult.test.js.snap

@@ -97,6 +97,12 @@ exports[`renders correctly in minimalist form 1`] = `
   margin: 0;
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c5 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c2 {
     -webkit-flex-direction: row;
@@ -279,6 +285,12 @@ exports[`renders correctly with copy 1`] = `
   }
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c5 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c2 {
     -webkit-flex-direction: row;
@@ -452,6 +464,12 @@ exports[`renders correctly with date 1`] = `
   margin: 0;
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c5 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c2 {
     -webkit-flex-direction: row;
@@ -619,6 +637,12 @@ exports[`renders correctly with date and type 1`] = `
   margin: 0;
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c5 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c2 {
     -webkit-flex-direction: row;

package/dist/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap

@@ -65,6 +65,20 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -278,6 +292,20 @@ exports[`renders Single Message with Image correctly 1`] = `
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;
@@ -482,6 +510,20 @@ exports[`renders Single Message with double image correctly 1`] = `
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -736,6 +778,20 @@ exports[`renders Single Message with full width correctly 1`] = `
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;
@@ -940,6 +996,20 @@ exports[`renders Single Message with full width image and no text correctly 1`]
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
 
 }
@@ -1066,6 +1136,14 @@ exports[`renders Single Message with no Image correctly 1`] = `
   padding: 1rem;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+
+}
+
 @media (min-width:740px) {
 
 }

package/dist/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap

@@ -153,6 +153,20 @@ exports[`renders correctly 1`] = `
   right: 1.5rem;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c12 {
     width: auto;

package/dist/components/Organisms/Membership/Membership.test.js

@@ -22,5 +22,5 @@ it('renders correctly', () => {
     subtitle: "Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.",
     otherDescription: "Your donation will help us fund amazing projects in the UK and around the world."
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c6 {\n      font-size: 1.5rem;\n      line-height: 1.5rem;\n      text-transform: inherit;\n      font-weight: 800;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c7 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c12 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c22 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: 500;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      display: block;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .c3 {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c14 {\n      width: 100%;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      color: #5C5C5E;\n    }\n\n    .c16 {\n      margin-bottom: 0.5rem;\n      font-weight: normal;\n    }\n\n    .c17 {\n      position: relative;\n      font-size: 1.25rem;\n    }\n\n    .c18 {\n      position: relative;\n      width: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: end;\n      -webkit-justify-content: flex-end;\n      -ms-flex-pack: end;\n      justify-content: flex-end;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n    }\n\n    .c19 {\n      position: relative;\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      padding: 1rem 2.4rem 1rem 1.5rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      border-radius: 0.5rem;\n      font-size: inherit;\n      z-index: 2;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c19:focus {\n      border: 1px solid #666;\n    }\n\n    .c15 {\n      display: block;\n    }\n\n    .c15 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n    }\n\n    .c20 {\n      display: block;\n    }\n\n    .c20 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n      border-color: #E52630;\n      background-color: #E52630;\n      color: #FFFFFF;\n    }\n\n    .c0 {\n      background-color: #FEE3CC;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      min-height: 100vh;\n    }\n\n    .c2 {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: auto;\n    }\n\n    .c2:before {\n      color: #FEE3CC;\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-shadow: inset 0px 4rem 2rem -2rem;\n    }\n\n    .c4 {\n      position: relative;\n      max-width: 320px;\n      text-align: center;\n      margin-bottom: 50%;\n    }\n\n    .c5 {\n      padding: 2rem 1rem 0;\n      margin-bottom: 2rem;\n    }\n\n    .c8 {\n      background-color: #FFFFFF;\n      box-shadow: 0px 1rem 4rem rgba(0,0,0,0.3);\n      height: 450px;\n    }\n\n    .c9 {\n      padding: 1rem;\n    }\n\n    .c9 h3 {\n      margin-top: 1rem;\n    }\n\n    .c9 input {\n      max-width: 100%;\n      margin: 0;\n    }\n\n    .c10 {\n      padding: 0;\n      margin: 0;\n      border: none;\n    }\n\n    .c10 > :not(:last-child):not(legend) {\n      margin-bottom: 2rem;\n    }\n\n    .c11 {\n      margin: 0;\n      padding: 0;\n    }\n\n    .c13 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: justify;\n      -webkit-justify-content: space-between;\n      -ms-flex-pack: justify;\n      justify-content: space-between;\n    }\n\n    .c13 label {\n      -webkit-flex: 0 0 30%;\n      -ms-flex: 0 0 30%;\n      flex: 0 0 30%;\n    }\n\n    .c13 label input {\n      cursor: pointer;\n      padding: 1rem;\n    }\n\n    .c13 label:hover input {\n      border-color: #E52630;\n    }\n\n    .c21 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n    }\n\n    .c23 {\n      margin-right: auto;\n    }\n\n    .c24 {\n      position: relative;\n      -webkit-flex: 0 0 50%;\n      -ms-flex: 0 0 50%;\n      flex: 0 0 50%;\n      font-weight: 400;\n      display: block;\n    }\n\n    .c24 span {\n      position: absolute;\n      padding: 0px 15px;\n      font-size: 20px;\n      top: 50%;\n      -webkit-transform: translateY(-50%);\n      -ms-transform: translateY(-50%);\n      transform: translateY(-50%);\n      left: 0px;\n      font-weight: 500;\n    }\n\n    .c24 input {\n      border: 2px solid #E1E2E3;\n      background: transparent;\n      padding: 0.5rem 1rem 0.5rem 2rem;\n    }\n\n    .c24 input:focus {\n      border: 2px solid #E52630;\n    }\n\n    .c26 {\n      line-height: 1.5;\n    }\n\n    .c25 {\n      width: 100%;\n      color: #FFFFFF;\n      font-size: 1rem;\n      font-weight: bold;\n      cursor: pointer;\n      padding: 1rem 0.5rem;\n      background: #E52630;\n      border: none;\n      border-radius: 100px;\n    }\n\n    .c25:active,\n    .c25:focus,\n    .c25:hover {\n      background-color: #961D35;\n    }\n\n    @media (min-width:740px) {\n\n    }\n\n    @media (min-width:1024px) {\n\n    }\n\n    @media (min-width:1024px) {\n      .c0 {\n        -webkit-align-items: center;\n        -webkit-box-align: center;\n        -ms-flex-align: center;\n        align-items: center;\n        -webkit-box-pack: inherit;\n        -webkit-justify-content: inherit;\n        -ms-flex-pack: inherit;\n        justify-content: inherit;\n        min-height: 750px;\n        height: 100vh;\n        max-height: 900px;\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        height: 100%;\n      }\n\n      .c2:before {\n        content: none;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c4 {\n        margin: 0 8rem;\n        max-width: 420px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c8 {\n        height: 430px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c24 {\n        -webkit-flex: 0 0 60%;\n        -ms-flex: 0 0 60%;\n        flex: 0 0 60%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c25 {\n        width: auto;\n        padding: 1rem 2rem;\n        margin: 0 auto 2rem;\n      }\n    }\n\n    <div\n      className=\"c0\"\n      id=\"mship-1\"\n    >\n      <div\n        className=\"c1 c2\"\n        height=\"100%\"\n        width=\"100%\"\n      >\n        <img\n          alt=\"Background image\"\n          className=\"c3 lazyload\"\n          data-src={null}\n          height=\"100%\"\n          width=\"100%\"\n        />\n      </div>\n      <div\n        className=\"c4\"\n      >\n        <div\n          className=\"c5\"\n        >\n          <h2\n            className=\"c6\"\n            color=\"inherit\"\n            size=\"l\"\n          >\n            Help someone like Jordan see a better tomorrow\n          </h2>\n          <p\n            className=\"c7\"\n            color=\"inherit\"\n            size=\"s\"\n          >\n            Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.\n          </p>\n        </div>\n        <div\n          className=\"c8\"\n        >\n          <form\n            className=\"c9\"\n            onSubmit={[Function]}\n          >\n            <fieldset\n              className=\"c10\"\n            >\n              <legend\n                className=\"c11\"\n              >\n                <h3\n                  className=\"c12\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Choose your monthly donation\n                </h3>\n              </legend>\n              <div\n                className=\"c13\"\n              >\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box1\"\n                >\n                  <span\n                    className=\"c7 c16\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c17\"\n                  >\n                    \n                    <div\n                      className=\"c18\"\n                    >\n                      <input\n                        aria-describedby=\"mship-1--moneyBuy-box1\"\n                        aria-label=\"\xA35\"\n                        className=\"c19\"\n                        id=\"mship-1--moneyBuy-box1\"\n                        name=\"mship-1--moneyBuy1\"\n                        onClick={[Function]}\n                        placeholder=\"\"\n                        required={false}\n                        type=\"button\"\n                        value=\"\xA3 5\"\n                      />\n                      \n                    </div>\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c20\"\n                  htmlFor=\"mship-1--moneyBuy-box2\"\n                >\n                  <span\n                    className=\"c7 c16\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c17\"\n                  >\n                    \n                    <div\n                      className=\"c18\"\n                    >\n                      <input\n                        aria-describedby=\"mship-1--moneyBuy-box2\"\n                        aria-label=\"\xA310\"\n                        className=\"c19\"\n                        id=\"mship-1--moneyBuy-box2\"\n                        name=\"mship-1--moneyBuy2\"\n                        onClick={[Function]}\n                        placeholder=\"\"\n                        required={false}\n                        type=\"button\"\n                        value=\"\xA3 10\"\n                      />\n                      \n                    </div>\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box3\"\n                >\n                  <span\n                    className=\"c7 c16\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c17\"\n                  >\n                    \n                    <div\n                      className=\"c18\"\n                    >\n                      <input\n                        aria-describedby=\"mship-1--moneyBuy-box3\"\n                        aria-label=\"\xA320\"\n                        className=\"c19\"\n                        id=\"mship-1--moneyBuy-box3\"\n                        name=\"mship-1--moneyBuy3\"\n                        onClick={[Function]}\n                        placeholder=\"\"\n                        required={false}\n                        type=\"button\"\n                        value=\"\xA3 20\"\n                      />\n                      \n                    </div>\n                  </div>\n                  \n                </label>\n              </div>\n              <div\n                className=\"c21\"\n              >\n                <span\n                  className=\"c22 c23\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Other amount\n                </span>\n                <label\n                  className=\"c14 c24\"\n                  htmlFor=\"mship-1--MoneyBuy-userInput\"\n                >\n                  <span\n                    className=\"c7 c16\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\xA3\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c17\"\n                  >\n                    \n                    <div\n                      className=\"c18\"\n                    >\n                      <input\n                        aria-describedby=\"mship-1--MoneyBuy-userInput\"\n                        aria-label=\"Input a different amount\"\n                        className=\"c19\"\n                        id=\"mship-1--MoneyBuy-userInput\"\n                        max=\"25000\"\n                        min=\"1\"\n                        name=\"membership_amount\"\n                        onChange={[Function]}\n                        onClick={[Function]}\n                        onKeyPress={[Function]}\n                        pattern=\"[^[0-9]+([,.][0-9]+)?$]\"\n                        placeholder=\"0.00\"\n                        required={false}\n                        step=\"0.01\"\n                        type=\"number\"\n                        value=\"\"\n                      />\n                      \n                    </div>\n                  </div>\n                  \n                </label>\n              </div>\n              <input\n                className=\"c25\"\n                type=\"submit\"\n                value=\"Donate\"\n              />\n              <p\n                className=\"c26\"\n              />\n            </fieldset>\n          </form>\n        </div>\n      </div>\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c6 {\n      font-size: 1.5rem;\n      line-height: 1.5rem;\n      text-transform: inherit;\n      font-weight: 800;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c7 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c12 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c22 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: 500;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      display: block;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .c3 {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c14 {\n      width: 100%;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      color: #5C5C5E;\n    }\n\n    .c16 {\n      margin-bottom: 0.5rem;\n      font-weight: normal;\n    }\n\n    .c17 {\n      position: relative;\n      font-size: 1.25rem;\n    }\n\n    .c18 {\n      position: relative;\n      width: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: end;\n      -webkit-justify-content: flex-end;\n      -ms-flex-pack: end;\n      justify-content: flex-end;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n    }\n\n    .c19 {\n      position: relative;\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      padding: 1rem 2.4rem 1rem 1.5rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      border-radius: 0.5rem;\n      font-size: inherit;\n      z-index: 2;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c19:focus {\n      border: 1px solid #666;\n    }\n\n    .c15 {\n      display: block;\n    }\n\n    .c15 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n    }\n\n    .c20 {\n      display: block;\n    }\n\n    .c20 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n      border-color: #E52630;\n      background-color: #E52630;\n      color: #FFFFFF;\n    }\n\n    .c0 {\n      background-color: #FEE3CC;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      min-height: 100vh;\n    }\n\n    .c2 {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: auto;\n    }\n\n    .c2:before {\n      color: #FEE3CC;\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-shadow: inset 0px 4rem 2rem -2rem;\n    }\n\n    .c4 {\n      position: relative;\n      max-width: 320px;\n      text-align: center;\n      margin-bottom: 50%;\n    }\n\n    .c5 {\n      padding: 2rem 1rem 0;\n      margin-bottom: 2rem;\n    }\n\n    .c8 {\n      background-color: #FFFFFF;\n      box-shadow: 0px 1rem 4rem rgba(0,0,0,0.3);\n      height: 450px;\n    }\n\n    .c9 {\n      padding: 1rem;\n    }\n\n    .c9 h3 {\n      margin-top: 1rem;\n    }\n\n    .c9 input {\n      max-width: 100%;\n      margin: 0;\n    }\n\n    .c10 {\n      padding: 0;\n      margin: 0;\n      border: none;\n    }\n\n    .c10 > :not(:last-child):not(legend) {\n      margin-bottom: 2rem;\n    }\n\n    .c11 {\n      margin: 0;\n      padding: 0;\n    }\n\n    .c13 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: justify;\n      -webkit-justify-content: space-between;\n      -ms-flex-pack: justify;\n      justify-content: space-between;\n    }\n\n    .c13 label {\n      -webkit-flex: 0 0 30%;\n      -ms-flex: 0 0 30%;\n      flex: 0 0 30%;\n    }\n\n    .c13 label input {\n      cursor: pointer;\n      padding: 1rem;\n    }\n\n    .c13 label:hover input {\n      border-color: #E52630;\n    }\n\n    .c21 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n    }\n\n    .c23 {\n      margin-right: auto;\n    }\n\n    .c24 {\n      position: relative;\n      -webkit-flex: 0 0 50%;\n      -ms-flex: 0 0 50%;\n      flex: 0 0 50%;\n      font-weight: 400;\n      display: block;\n    }\n\n    .c24 span {\n      position: absolute;\n      padding: 0px 15px;\n      font-size: 20px;\n      top: 50%;\n      -webkit-transform: translateY(-50%);\n      -ms-transform: translateY(-50%);\n      transform: translateY(-50%);\n      left: 0px;\n      font-weight: 500;\n    }\n\n    .c24 input {\n      border: 2px solid #E1E2E3;\n      background: transparent;\n      padding: 0.5rem 1rem 0.5rem 2rem;\n    }\n\n    .c24 input:focus {\n      border: 2px solid #E52630;\n    }\n\n    .c26 {\n      line-height: 1.5;\n    }\n\n    .c25 {\n      width: 100%;\n      color: #FFFFFF;\n      font-size: 1rem;\n      font-weight: bold;\n      cursor: pointer;\n      padding: 1rem 0.5rem;\n      background: #E52630;\n      border: none;\n      border-radius: 100px;\n    }\n\n    .c25:active,\n    .c25:focus,\n    .c25:hover {\n      background-color: #961D35;\n    }\n\n    @supports not ((object-fit:cover) or (object-fit:contain)) {\n      .c3 {\n        visibility: hidden;\n      }\n    }\n\n    @media (min-width:740px) {\n\n    }\n\n    @media (min-width:1024px) {\n\n    }\n\n    @media (min-width:1024px) {\n      .c0 {\n        -webkit-align-items: center;\n        -webkit-box-align: center;\n        -ms-flex-align: center;\n        align-items: center;\n        -webkit-box-pack: inherit;\n        -webkit-justify-content: inherit;\n        -ms-flex-pack: inherit;\n        justify-content: inherit;\n        min-height: 750px;\n        height: 100vh;\n        max-height: 900px;\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        height: 100%;\n      }\n\n      .c2:before {\n        content: none;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c4 {\n        margin: 0 8rem;\n        max-width: 420px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c8 {\n        height: 430px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c24 {\n        -webkit-flex: 0 0 60%;\n        -ms-flex: 0 0 60%;\n        flex: 0 0 60%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c25 {\n        width: auto;\n        padding: 1rem 2rem;\n        margin: 0 auto 2rem;\n      }\n    }\n\n    <div\n      className=\"c0\"\n      id=\"mship-1\"\n    >\n      <div\n        className=\"c1 c2\"\n        height=\"100%\"\n        width=\"100%\"\n      >\n        <img\n          alt=\"Background image\"\n          className=\"c3 lazyload\"\n          data-src={null}\n          height=\"100%\"\n          width=\"100%\"\n        />\n      </div>\n      <div\n        className=\"c4\"\n      >\n        <div\n          className=\"c5\"\n        >\n          <h2\n            className=\"c6\"\n            color=\"inherit\"\n            size=\"l\"\n          >\n            Help someone like Jordan see a better tomorrow\n          </h2>\n          <p\n            className=\"c7\"\n            color=\"inherit\"\n            size=\"s\"\n          >\n            Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.\n          </p>\n        </div>\n        <div\n          className=\"c8\"\n        >\n          <form\n            className=\"c9\"\n            onSubmit={[Function]}\n          >\n            <fieldset\n              className=\"c10\"\n            >\n              <legend\n                className=\"c11\"\n              >\n                <h3\n                  className=\"c12\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Choose your monthly donation\n                </h3>\n              </legend>\n              <div\n                className=\"c13\"\n              >\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box1\"\n                >\n                  <span\n                    className=\"c7 c16\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c17\"\n                  >\n                    \n                    <div\n                      className=\"c18\"\n                    >\n                      <input\n                        aria-describedby=\"mship-1--moneyBuy-box1\"\n                        aria-label=\"\xA35\"\n                        className=\"c19\"\n                        id=\"mship-1--moneyBuy-box1\"\n                        name=\"mship-1--moneyBuy1\"\n                        onClick={[Function]}\n                        placeholder=\"\"\n                        required={false}\n                        type=\"button\"\n                        value=\"\xA3 5\"\n                      />\n                      \n                    </div>\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c20\"\n                  htmlFor=\"mship-1--moneyBuy-box2\"\n                >\n                  <span\n                    className=\"c7 c16\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c17\"\n                  >\n                    \n                    <div\n                      className=\"c18\"\n                    >\n                      <input\n                        aria-describedby=\"mship-1--moneyBuy-box2\"\n                        aria-label=\"\xA310\"\n                        className=\"c19\"\n                        id=\"mship-1--moneyBuy-box2\"\n                        name=\"mship-1--moneyBuy2\"\n                        onClick={[Function]}\n                        placeholder=\"\"\n                        required={false}\n                        type=\"button\"\n                        value=\"\xA3 10\"\n                      />\n                      \n                    </div>\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box3\"\n                >\n                  <span\n                    className=\"c7 c16\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c17\"\n                  >\n                    \n                    <div\n                      className=\"c18\"\n                    >\n                      <input\n                        aria-describedby=\"mship-1--moneyBuy-box3\"\n                        aria-label=\"\xA320\"\n                        className=\"c19\"\n                        id=\"mship-1--moneyBuy-box3\"\n                        name=\"mship-1--moneyBuy3\"\n                        onClick={[Function]}\n                        placeholder=\"\"\n                        required={false}\n                        type=\"button\"\n                        value=\"\xA3 20\"\n                      />\n                      \n                    </div>\n                  </div>\n                  \n                </label>\n              </div>\n              <div\n                className=\"c21\"\n              >\n                <span\n                  className=\"c22 c23\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Other amount\n                </span>\n                <label\n                  className=\"c14 c24\"\n                  htmlFor=\"mship-1--MoneyBuy-userInput\"\n                >\n                  <span\n                    className=\"c7 c16\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\xA3\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c17\"\n                  >\n                    \n                    <div\n                      className=\"c18\"\n                    >\n                      <input\n                        aria-describedby=\"mship-1--MoneyBuy-userInput\"\n                        aria-label=\"Input a different amount\"\n                        className=\"c19\"\n                        id=\"mship-1--MoneyBuy-userInput\"\n                        max=\"25000\"\n                        min=\"1\"\n                        name=\"membership_amount\"\n                        onChange={[Function]}\n                        onClick={[Function]}\n                        onKeyPress={[Function]}\n                        pattern=\"[^[0-9]+([,.][0-9]+)?$]\"\n                        placeholder=\"0.00\"\n                        required={false}\n                        step=\"0.01\"\n                        type=\"number\"\n                        value=\"\"\n                      />\n                      \n                    </div>\n                  </div>\n                  \n                </label>\n              </div>\n              <input\n                className=\"c25\"\n                type=\"submit\"\n                value=\"Donate\"\n              />\n              <p\n                className=\"c26\"\n              />\n            </fieldset>\n          </form>\n        </div>\n      </div>\n    </div>\n  ");
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.25.8",
+  "version": "8.26.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Atoms/Picture/Picture.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import styled, { css, withTheme } from 'styled-components';
 import PropTypes from 'prop-types';
 import spacing from '../../../theme/shared/spacing';
@@ -10,22 +10,39 @@ import 'lazysizes/plugins/blur-up/ls.blur-up';
 const IMAGE_FALLBACK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
 
 const Wrapper = styled.div`
-  ${({ objFitState, nonObjFitImage }) => (!objFitState && nonObjFitImage) && `background-image: url(${nonObjFitImage}); background-size: cover; background-position: center;`};
+  // If this browser doesn't support objectFit:
+  ${({ nonObjFitImage }) => (nonObjFitImage)
+  && `@supports not ((object-fit: cover) or (object-fit: none) or (object-fit: contain)) {
+        background-image: url(${nonObjFitImage});
+        background-size: cover;
+        background-position: center;
+      }
+  `};
+
   display: block;
   width: ${props => (props.width ? props.width : '100%')};
   height: ${props => (props.height ? props.height : '100%')};
   position: relative;
-  ${({ isBackgroundImage }) => isBackgroundImage && 'position: absolute; bottom: 0px; left: 0px; right: 0px; height: 100%;'};
+
+  ${({ isBackgroundImage }) => isBackgroundImage
+    && 'position: absolute; bottom: 0px; left: 0px; right: 0px; height: 100%;'};
   `;
 
 const Image = styled.img`
   width: ${props => (props.width ? props.width : '100%')};
   height: ${props => (props.height ? props.height : 'auto')};
   display: block;
+
   object-fit: ${props => (props.objectFit === 'none' && 'none')
     || (props.objectFit === 'cover' && 'cover')
     || (props.objectFit === 'contain' && 'contain')};
-  ${({ objectFit, objFitState }) => (objectFit !== 'none' && !objFitState) && 'visibility: hidden;'}; // Allows image to provide the container height, but make it invisible
+
+  // If this browser doesn't support objectFit:
+  ${({ objectFit }) => (objectFit !== 'none')
+    && `@supports not ((object-fit: cover) or (object-fit: contain)) {
+      visibility: hidden;
+    `}
+    // Allows image to provide the container height, but make it invisible
 
   /* Check for Cards/smallBreakpointRowLayout prop coming from the CMS and adjust styling for row view */
   ${({ smallBreakpointRowLayout }) => (smallBreakpointRowLayout === true) && css`
@@ -60,7 +77,6 @@ const Image = styled.img`
         height: ${props => (props.height ? props.height : 'auto')};
       }
   `}
-
 `;
 
 /** Responsive Picture */
@@ -77,17 +93,8 @@ const Picture = ({
   mediumBreakpointRowLayout = null,
   ...rest
 }) => {
-  const document = typeof window !== 'undefined' ? window.document : null;
-  const [objFitState, setObjFitState] = useState(true);
   let nonObjFitImage = null;
 
-  useEffect(() => {
-    // Once document is available, determine if this browser supports object-fit
-    if ('objectFit' in document.documentElement.style === false) {
-      setObjFitState(false);
-    }
-  }, [document]);
-
   // Determine which image will be used for the nonObjectFit fallback
   if (image) {
     nonObjFitImage = image;
@@ -104,7 +111,6 @@ const Picture = ({
         images={images}
         isBackgroundImage={isBackgroundImage}
         nonObjFitImage={nonObjFitImage}
-        objFitState={objFitState}
         {...rest}
       >
         <Image
@@ -114,7 +120,6 @@ const Picture = ({
           objectFit={objectFit}
           data-src={image}
           className="lazyload"
-          objFitState={objFitState}
         />
       </Wrapper>
     );
@@ -126,11 +131,9 @@ const Picture = ({
       width={width}
       image={image}
       images={images}
-      setObjFitState={setObjFitState}
       className="lazyload"
       isBackgroundImage={isBackgroundImage}
       nonObjFitImage={nonObjFitImage}
-      objFitState={objFitState}
       {...rest}
     >
       <Image
@@ -145,7 +148,6 @@ const Picture = ({
         data-sizes="auto"
         data-lowsrc={imageLow}
         className="lazyload"
-        objFitState={objFitState}
         smallBreakpointRowLayout={smallBreakpointRowLayout}
         mediumBreakpointRowLayout={mediumBreakpointRowLayout}
       />

package/src/components/Atoms/Picture/Picture.test.js

@@ -1,9 +1,9 @@
-import React from "react";
-import "jest-styled-components";
-import renderWithTheme from "../../../../tests/hoc/shallowWithTheme";
-import Picture from "./Picture";
-import { defaultData } from "../../../styleguide/data/data";
-it("renders correctly", () => {
+import React from 'react';
+import 'jest-styled-components';
+import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
+import Picture from './Picture';
+import { defaultData } from '../../../styleguide/data/data';
+it('renders correctly', () => {
   const tree = renderWithTheme(
     <Picture
       images={defaultData.images}
@@ -27,6 +27,14 @@ it("renders correctly", () => {
       object-fit: none;
     }
 
+    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+      .c0 {
+        background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+        background-size: cover;
+        background-position: center;
+      }
+    }
+
     <div
       className="c0 lazyload"
       height="auto"
@@ -48,7 +56,7 @@ it("renders correctly", () => {
   `);
 });
 
-it("renders correctly with custom props", () => {
+it('renders correctly with custom props', () => {
   const tree = renderWithTheme(
     <Picture
       images={defaultData.images}
@@ -75,6 +83,20 @@ it("renders correctly with custom props", () => {
       object-fit: cover;
     }
 
+    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+      .c0 {
+        background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+        background-size: cover;
+        background-position: center;
+      }
+    }
+
+    @supports not ((object-fit:cover) or (object-fit:contain)) {
+      .c1 {
+        visibility: hidden;
+      }
+    }
+
     <div
       className="c0 lazyload"
       height="100px"

package/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js

@@ -154,6 +154,20 @@ it('renders article teaser correctly', () => {
       display: flex;
     }
 
+    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+      .c4 {
+        background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+        background-size: cover;
+        background-position: center;
+      }
+    }
+
+    @supports not ((object-fit:cover) or (object-fit:contain)) {
+      .c6 {
+        visibility: hidden;
+      }
+    }
+
     @media (min-width:740px) {
       .c2 {
         -webkit-flex-direction: row;
@@ -411,6 +425,20 @@ it('renders press realese correctly', () => {
       display: flex;
     }
 
+    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+      .c4 {
+        background-image: url(mock.asset);
+        background-size: cover;
+        background-position: center;
+      }
+    }
+
+    @supports not ((object-fit:cover) or (object-fit:contain)) {
+      .c6 {
+        visibility: hidden;
+      }
+    }
+
     @media (min-width:740px) {
       .c2 {
         -webkit-flex-direction: row;

package/src/components/Molecules/Card/__snapshots__/Card.test.js.snap

@@ -189,6 +189,12 @@ exports[`renders correctly with no body 1`] = `
   height: auto;
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c3 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:0px) {
   .c0 {
     -webkit-flex-direction: column;

package/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap

@@ -119,6 +119,20 @@ exports[`renders Column view correctly 1`] = `
   z-index: 2;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;
@@ -377,6 +391,20 @@ exports[`renders correctly 1`] = `
   z-index: 2;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;

package/src/components/Molecules/PartnerLink/PartnerLink.test.js

@@ -116,6 +116,14 @@ it('renders correctly', () => {
       background-color: #E52630;
     }
 
+    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+      .c2 {
+        background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+        background-size: cover;
+        background-position: center;
+      }
+    }
+
     @media (min-width:740px) {
       .c6 {
         font-size: 1rem;

package/src/components/Molecules/Promo/__snapshots__/Promo.test.js.snap

@@ -153,6 +153,20 @@ exports[`renders Promo correctly 1`] = `
   }
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c2 {
+    background-image: url(../promo.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c3 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c9 {
     width: auto;
@@ -431,6 +445,20 @@ exports[`renders Promo correctly end position 1`] = `
   }
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c2 {
+    background-image: url(../promo.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c3 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c9 {
     width: auto;

package/src/components/Molecules/SearchResult/__snapshots__/SearchResult.test.js.snap

@@ -97,6 +97,12 @@ exports[`renders correctly in minimalist form 1`] = `
   margin: 0;
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c5 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c2 {
     -webkit-flex-direction: row;
@@ -279,6 +285,12 @@ exports[`renders correctly with copy 1`] = `
   }
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c5 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c2 {
     -webkit-flex-direction: row;
@@ -452,6 +464,12 @@ exports[`renders correctly with date 1`] = `
   margin: 0;
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c5 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c2 {
     -webkit-flex-direction: row;
@@ -619,6 +637,12 @@ exports[`renders correctly with date and type 1`] = `
   margin: 0;
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c5 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c2 {
     -webkit-flex-direction: row;

package/src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap

@@ -65,6 +65,20 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -278,6 +292,20 @@ exports[`renders Single Message with Image correctly 1`] = `
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;
@@ -482,6 +510,20 @@ exports[`renders Single Message with double image correctly 1`] = `
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -736,6 +778,20 @@ exports[`renders Single Message with full width correctly 1`] = `
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;
@@ -940,6 +996,20 @@ exports[`renders Single Message with full width image and no text correctly 1`]
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
 
 }
@@ -1066,6 +1136,14 @@ exports[`renders Single Message with no Image correctly 1`] = `
   padding: 1rem;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+
+}
+
 @media (min-width:740px) {
 
 }

package/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap

@@ -153,6 +153,20 @@ exports[`renders correctly 1`] = `
   right: 1.5rem;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c12 {
     width: auto;

package/src/components/Organisms/Membership/Membership.test.js

@@ -339,6 +339,12 @@ it('renders correctly', () => {
       background-color: #961D35;
     }
 
+    @supports not ((object-fit:cover) or (object-fit:contain)) {
+      .c3 {
+        visibility: hidden;
+      }
+    }
+
     @media (min-width:740px) {
 
     }