diff --git a/src/components/phone/__tests__/__snapshots__/phone.test.js.snap b/src/components/phone/__tests__/__snapshots__/phone.test.js.snap
index 33e6ab9c7..a9307ee25 100644
--- a/src/components/phone/__tests__/__snapshots__/phone.test.js.snap
+++ b/src/components/phone/__tests__/__snapshots__/phone.test.js.snap
@@ -303,7 +303,7 @@ exports[`phone iOS landscape renders as expected 1`] = `
       className="relative overflow-hidden"
     >
       <div
-        className="relative flex-parent flex-parent--center-main flex-parent--center-cross bg-gray"
+        className="relative flex flex--center-main flex--center-cross bg-gray"
         onFocus={[Function]}
         onMouseLeave={[Function]}
         onMouseOver={[Function]}
diff --git a/src/components/video/__tests__/__snapshots__/video.test.js.snap b/src/components/video/__tests__/__snapshots__/video.test.js.snap
index 0c835b26b..44d093e75 100644
--- a/src/components/video/__tests__/__snapshots__/video.test.js.snap
+++ b/src/components/video/__tests__/__snapshots__/video.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`video Basic. Your system settings do not prefer reduced motion, the video will autoplay (unless your browser settings block autoplay). renders as expected 1`] = `
 <div
-  className="relative flex-parent flex-parent--center-main flex-parent--center-cross bg-gray"
+  className="relative flex flex--center-main flex--center-cross bg-gray"
   onFocus={[Function]}
   onMouseLeave={[Function]}
   onMouseOver={[Function]}
@@ -54,7 +54,7 @@ exports[`video Basic. Your system settings do not prefer reduced motion, the vid
 
 exports[`video Reduced motion renders as expected 1`] = `
 <div
-  className="relative flex-parent flex-parent--center-main flex-parent--center-cross bg-gray"
+  className="relative flex flex--center-main flex--center-cross bg-gray"
   onFocus={[Function]}
   onMouseLeave={[Function]}
   onMouseOver={[Function]}
@@ -104,7 +104,7 @@ exports[`video Reduced motion renders as expected 1`] = `
 
 exports[`video The video will not autoplay. Sets autoplay={false} and loop={false}. A preview image will not appear on iOS. renders as expected 1`] = `
 <div
-  className="relative flex-parent flex-parent--center-main flex-parent--center-cross bg-gray"
+  className="relative flex flex--center-main flex--center-cross bg-gray"
   onFocus={[Function]}
   onMouseLeave={[Function]}
   onMouseOver={[Function]}
@@ -156,7 +156,7 @@ exports[`video The video will not autoplay. Sets autoplay={false} and loop={fals
 
 exports[`video The video will not autoplay. Uses \`poster\` to set preview image. renders as expected 1`] = `
 <div
-  className="relative flex-parent flex-parent--center-main flex-parent--center-cross bg-gray"
+  className="relative flex flex--center-main flex--center-cross bg-gray"
   onFocus={[Function]}
   onMouseLeave={[Function]}
   onMouseOver={[Function]}
diff --git a/src/components/video/video.js b/src/components/video/video.js
index 9c627c271..5da1a057d 100644
--- a/src/components/video/video.js
+++ b/src/components/video/video.js
@@ -82,7 +82,7 @@ export default class Video extends React.PureComponent {
 
     return (
       <div
-        className="relative flex-parent flex-parent--center-main flex-parent--center-cross bg-gray"
+        className="relative flex flex--center-main flex--center-cross bg-gray"
         onMouseOver={this.onHover}
         onMouseLeave={this.onOut}
         onFocus={this.onHover}