Use one observer. Get value from --smooth-corners

client/components/MainPage/Card/Card.module.css

@@ -7,8 +7,13 @@
     z-index: 1;
 
     display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
     height: 100%;
 
+    --smooth-corners: 0.8;
+    padding: 16px;
     border-radius: 16px;
     background-image: var(--CardBgImage);
     background-position: 100% 100%;
@@ -32,14 +37,6 @@
     }
 }
 
-.CardInner {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    flex-grow: 1;
-    padding: 16px;
-}
-
 .Card_Public {
     background-color: var(--cards-public-bg);
     color: var(--cards-public-text);
@@ -145,7 +142,7 @@
 }
 
 @media screen and (min-width: 375px) {
-    .CardInner {
+    .Card {
         padding: 16px;
     }
 
@@ -186,18 +183,16 @@
 
 @media screen and (min-width: 768px) {
     .Card {
-        border-radius: 24px;
-    }
-
-    .CardInner {
         padding: 32px;
+        border-radius: 24px;
     }
 
     .CardFooterCaption_NoSubtitle {
         font-size: 48px;
     }
 
     .CardTitle {
+        --smooth-corners: 0.8;
         border-radius: 8px;
         font-size: 32px;
     }
@@ -208,7 +203,7 @@
 }
 
 @media screen and (min-width: 1200px) {
-    .CardInner {
+    .Card {
         padding: clamp(30px, 2vw, 40px);
     }
 

client/components/MainPage/Card/Card.tsx

@@ -2,7 +2,7 @@ import { useRef } from 'react';
 import classNames from 'classnames/bind';
 import t from 'utils/typograph';
 import { STRAPI_URL } from 'transport-common/strapi/constants';
-import { useCardSmoothCorners } from './useCardSmoothCorners';
+import { useSmoothCorners } from './useSmoothCorners';
 
 import { CardProps } from './Card.types';
 
@@ -29,7 +29,9 @@ export function Card({
     footerCaption,
 }: CardProps) {
     const cardRef = useRef<HTMLAnchorElement>(null);
-    useCardSmoothCorners(cardRef);
+    const cardTitleRef = useRef<HTMLDivElement>(null);
+    useSmoothCorners(cardRef);
+    useSmoothCorners(cardTitleRef);
 
     return (
         <a
@@ -45,20 +47,19 @@ export function Card({
                 } as React.CSSProperties
             }
         >
-            <div className={cn(styles.CardInner)}>
-                {title && (
-                    <div
-                        className={cn(styles.CardTitle, {
-                            [styles.CardTitle_Bg]: titleBackgroundColor,
-                        })}
-                    >
-                        {t(title)}
-                    </div>
-                )}
-                {headerCaption && <p className={cn(styles.CardHeaderCaption)}>{t(headerCaption)}</p>}
-                {footerCaption && <p className={headerCaption ? cn(styles.CardFooterCaption) : cn(styles.CardFooterCaption_NoSubtitle)}>{t(footerCaption)}</p>}
-                {dynamicContent && <div className={cn(styles.CardDynamic)}>{dynamicContent}</div>}
-            </div>
+            {title && (
+                <div
+                    className={cn(styles.CardTitle, {
+                        [styles.CardTitle_Bg]: titleBackgroundColor,
+                    })}
+                    ref={cardTitleRef}
+                >
+                    {t(title)}
+                </div>
+            )}
+            {headerCaption && <p className={cn(styles.CardHeaderCaption)}>{t(headerCaption)}</p>}
+            {footerCaption && <p className={headerCaption ? cn(styles.CardFooterCaption) : cn(styles.CardFooterCaption_NoSubtitle)}>{t(footerCaption)}</p>}
+            {dynamicContent && <div className={cn(styles.CardDynamic)}>{dynamicContent}</div>}
         </a>
     );
 }

client/components/MainPage/Card/useSmoothCorners.ts

@@ -0,0 +1,38 @@
+import type { MutableRefObject } from "react";
+import { useEffect } from "react";
+import { getSvgPath } from "figma-squircle";
+
+function setCorners(entry: ResizeObserverEntry) {
+    const element = entry.target as HTMLElement;
+    const styles = window.getComputedStyle(element);
+    const { width, height, top, right, bottom, left } = entry.contentRect;
+
+    const clipPath = getSvgPath({
+        width: left + width + right,
+        height: top + height + bottom,
+        cornerRadius: parseInt(styles.borderRadius, 10),
+        cornerSmoothing: Number(styles.getPropertyValue('--smooth-corners'))
+    });
+
+    element.style.clipPath = `path('${clipPath}')`;
+}
+
+let smoothCornersObserver = null;
+
+if ('ResizeObserver' in globalThis) {
+    smoothCornersObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+            setCorners(entry);
+        }
+    });
+}
+
+export function useSmoothCorners(cardRef: MutableRefObject<HTMLElement>) {
+    useEffect(() => {
+        smoothCornersObserver.observe(cardRef.current);
+
+        return () => {
+            smoothCornersObserver.unobserve(cardRef.current);
+        };
+    }, []);
+}