GlassCase horizontal alignment

src/components/sections/Families/GlassCase.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, useEffect } from "react";
 import GlassCaseCard, {
   GlassCaseCardProps,
 } from "src/components/cards/GlassCaseCard";
@@ -16,9 +16,20 @@ export default function GlassCase(): ReactElement {
     { name: "Beautiful", image: Scenery },
     { name: "Fun", image: Game },
   ];
+
+  const scroller = React.createRef();
+  const scrollToCenter = () => {
+    const element = scroller.current;
+    element.scrollLeft = (element.scrollWidth - element.offsetWidth) / 2;
+  }
+
+  useEffect(() => {
+    scrollToCenter();
+  });
+
   return (
     <section className="d-flex blue-200-bg flex-column align-items-center py-5">
-      <div className="d-flex flex-column justify-content-center text-center px-3">
+      <div className="d-flex flex-column justify-content-center text-center px-3" ref={scroller}>
         <span className="dark p2 font-weight-bold">
           Always stay close, no matter the distance.
         </span>
@@ -27,10 +38,12 @@ export default function GlassCase(): ReactElement {
           lasting memories.
         </span>
       </div>
-      <div className="d-flex flex-row w-100 justify-content-center mt-5 scrolling-wrapper-flexbox">
-        {CARDS.map((card) => (
-          <GlassCaseCard name={card.name} image={card.image} />
-        ))}
+      <div className="d-flex w-100 justify-content-center">
+        <div className="d-flex flex-row mt-5 scrolling-wrapper-flexbox">
+          {CARDS.map((card) => (
+            <GlassCaseCard name={card.name} image={card.image} />
+          ))}
+        </div>
       </div>
     </section>
   );