style: update CallToActionSection styles

packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss

@@ -16,6 +16,12 @@
     width: fit-content;
   }
 
+  .mdx-cta-section__header__desktop-button {
+    .mdx-cta-button {
+      margin-top: unset;
+    }
+  }
+
   .mdx-cta-section--align-center {
     display: flex;
     flex-direction: column;
@@ -247,7 +253,21 @@
   }
 }
 
+@include utils.responsive('lg', 'up') {
+  .mdx-cta-section__header__mobile-button {
+    display: none;
+  }
+}
+
 @include utils.responsive('lg', 'down') {
+  .mdx-cta-section__header__desktop-button {
+    display: none;
+  }
+
+  .mdx-cta-section__header__mobile-button {
+    margin-top: 24px;
+  }
+
   .mdx-cta-section__title {
     @include lsd.typography('h3', true);
   }

packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx

@@ -154,6 +154,17 @@ export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
       ? 'list'
       : 'simple'
 
+  const button = href && ctaPosition === 'top' && (
+    <CallToActionButton
+      target={target}
+      href={href}
+      className="mdx-cta-section__link"
+      variant={variant}
+    >
+      {label}
+    </CallToActionButton>
+  )
+
   return (
     <div
       className={clsx(
@@ -174,22 +185,17 @@ export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
           <Typography component="h2" className={clsx('mdx-cta-section__title')}>
             {title}
           </Typography>
-          {href && ctaPosition === 'top' && (
-            <CallToActionButton
-              target={target}
-              href={href}
-              className="mdx-cta-section__link"
-              variant={variant}
-            >
-              {label}
-            </CallToActionButton>
-          )}
+          <div className="mdx-cta-section__header__desktop-button">
+            {button}
+          </div>
         </div>
         {description && (
           <Typography component="h3" className="mdx-cta-section__description">
             {description}
           </Typography>
         )}
+        <div className="mdx-cta-section__header__mobile-button">{button}</div>
+
         {href && ctaPosition === 'bottom' && (
           <CallToActionButton
             target={target}

packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss

@@ -47,4 +47,9 @@
       @include lsd.typography('h3');
     }
   }
+
+  .mdx-section-header__title {
+    display: flex;
+    flex-wrap: wrap;
+  }
 }

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -345,10 +345,6 @@ a code {
     overflow-x: hidden !important;
   }
 
-  .navbar {
-    background-color: transparent;
-  }
-
   h2 {
     margin-top: unset !important;
   }