refactor: add variant to container

src/components/about/about.module.css

@@ -35,9 +35,6 @@
   }
 
   & .desc {
-    width: 100%;
-    max-width: 450px;
-    margin: 0 auto;
     line-height: 1.6;
     color: var(--color-foreground-subtle);
     text-align: center;

src/components/about/about.tsx

@@ -18,7 +18,7 @@ export function About() {
 
   return (
     <section className={styles.about}>
-      <Container>
+      <Container tight>
         <div className={styles.iconContainer}>
           <div className={styles.tail} />
           <div className={styles.icon}>

src/components/container/container.module.css

@@ -2,4 +2,8 @@
   width: 90%;
   max-width: 600px;
   margin: 0 auto;
+
+  &.tight {
+    max-width: 450px;
+  }
 }

src/components/container/container.tsx

@@ -5,8 +5,13 @@ import styles from './container.module.css';
 interface ContainerProps {
   children: React.ReactNode;
   className?: string;
+  tight?: boolean;
 }
 
-export function Container({ children, className }: ContainerProps) {
+export function Container({ children, className, tight }: ContainerProps) {
-  return <div className={cn(styles.container, className)}>{children}</div>;
+  return (
+    <div className={cn(styles.container, className, tight && styles.tight)}>
+      {children}
+    </div>
+  );
 }