Fixed some FAQ style bugs

package.json

@@ -15,10 +15,10 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
-    "@mui/base": "5.0.0-beta.62",
+    "@mui/base": "5.0.0-beta.63",
     "@next/third-parties": "15.0.3",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@types/node": "22.9.3",
+    "@types/node": "22.10.1",
     "@types/react": "18.3.12",
     "@types/react-dom": "19.0.0-rc.1",
     "algoliasearch": "^5.15.0",
@@ -51,36 +51,36 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.15.0",
+    "@eslint/js": "^9.16.0",
     "@graphql-codegen/add": "^5.0.3",
     "@graphql-codegen/cli": "^5.0.3",
     "@graphql-codegen/import-types-preset": "^3.0.0",
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
     "@graphql-codegen/typescript-operations": "^4.4.0",
     "@next/bundle-analyzer": "15.0.3",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addon-interactions": "^8.4.5",
-    "@storybook/addon-links": "^8.4.5",
+    "@storybook/addon-essentials": "^8.4.6",
+    "@storybook/addon-interactions": "^8.4.6",
+    "@storybook/addon-links": "^8.4.6",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^8.4.5",
-    "@storybook/nextjs": "^8.4.5",
-    "@storybook/react": "^8.4.5",
+    "@storybook/blocks": "^8.4.6",
+    "@storybook/nextjs": "^8.4.6",
+    "@storybook/react": "^8.4.6",
     "@storybook/testing-library": "^0.2.2",
     "@types/react-slick": "^0.23.13",
     "concurrently": "^9.1.0",
     "encoding": "^0.1.13",
-    "eslint": "^9.15.0",
+    "eslint": "^9.16.0",
     "eslint-config-next": "15.0.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-storybook": "^0.11.1",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.1",
     "prettier-plugin-tailwindcss": "^0.6.9",
     "react-docgen": "^7.1.0",
-    "storybook": "^8.4.5",
+    "storybook": "^8.4.6",
     "storybook-addon-module-mock": "^1.3.4",
     "tsconfig-paths-webpack-plugin": "^4.2.0",
-    "typescript-eslint": "^8.15.0"
+    "typescript-eslint": "^8.17.0"
   },
   "packageManager": "yarn@4.5.1",
   "resolutions": {

src/components/elements/accordion.tsx

@@ -88,7 +88,7 @@ const Accordion = ({
       <Heading>
         <button
           {...buttonProps}
-          className={twMerge("flex w-full items-center hocus-visible:underline", buttonProps?.className)}
+          className={twMerge("flex w-full items-center text-left hocus-visible:underline", buttonProps?.className)}
           id={`${id}-button`}
           aria-expanded={isExpanded}
           aria-controls={`${id}-panel`}

src/components/paragraphs/stanford-faq/faq-paragraph.tsx

@@ -31,7 +31,7 @@ const FaqParagraph = ({paragraph, ...props}: Props) => {
 
   return (
     <div {...props} className={twMerge("space-y-20", props.className)}>
-      <div className="flex items-center justify-between gap-20">
+      <div className="flex flex-col items-center justify-between gap-20 @3xl:flex-row">
         {heading && (
           <Header id={paragraph.id} className="mb-0">
             {heading}