refactor: css variables for colors and shadows

src/components/layout/SmallPageBlock/SmallPageBlock.tsx

@@ -1,6 +1,7 @@
 import { CSSProperties, FC, ReactNode } from "react";
 import classNames from "classnames";
 import styles from "@/components/layout/SmallPageBlock/SmallPageBlock.module.css";
+import { Box } from "@mantine/core";
 
 type Props = {
     children: ReactNode;
@@ -10,14 +11,15 @@ type Props = {
 
 const SmallPageBlock: FC<Props> = ({ children, style, active = false }) => {
     return (
-        <div
+        <Box
+            bdrs={"lg"}
             className={classNames(
                 styles.container,
                 active && styles["container-active"]
             )}
             style={style}>
             {children}
-        </div>
+        </Box>
     );
 };
 export default SmallPageBlock;