a11y: fix contrast ratio and reflow on Copilot Cookbook page (#61397)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: docs-bot

src/landings/components/CategoryLanding.tsx

@@ -176,7 +176,7 @@ export const CategoryLanding = () => {
           </div>
           <ul className="clearfix d-flex flex-wrap gutter-md-spacious" aria-live="polite">
             {searchResults.map((item, index) => (
-              <li key={index} className="col-md-6 col-lg-4 col-sm-12 list-style-none p-4">
+              <li key={index} className="col-12 col-md-6 col-lg-4 list-style-none p-4">
                 <CookBookArticleCard
                   title={item.title}
                   description={item.intro!}

src/landings/components/CookBookFilter.module.scss

@@ -3,16 +3,16 @@
 }
 
 .categoryLabel {
-  color: var(--fgColor-muted, var(--color-fg-muted, #656d76));
+  color: var(--fgColor-default, var(--color-fg-default, #1f2328));
   display: inline-block;
 }
 
 .complexityLabel {
-  color: var(--fgColor-muted, var(--color-fg-muted, #656d76));
+  color: var(--fgColor-default, var(--color-fg-default, #1f2328));
   display: inline-block;
 }
 
 .surfaceLabel {
-  color: var(--fgColor-muted, var(--color-fg-muted, #656d76));
+  color: var(--fgColor-default, var(--color-fg-default, #1f2328));
   display: inline-block;
 }