add fonts + fix paddings

src/components/Footer.astro

@@ -11,7 +11,7 @@ const { lang } = Astro.props
 const t = useTranslations(lang)
 ---
 
-<footer id="contacts" class="flex flex-col items-center gap-6 text-center">
+<footer id="contacts" class="flex flex-col items-center gap-4 md:gap-6 text-center">
   <script
     is:inline
     type="text/javascript"
@@ -19,7 +19,7 @@ const t = useTranslations(lang)
     async
     src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A069b17526dc83cbf87c488f13ae089eb3af0f8f74af57e1be82e183434693562&width=100%25&height=400&lang=ru_RU&scroll=true"
   ></script>
-  <div class="flex flex-col items-center gap-4 px-6 py-8 text-center">
+  <div class="flex flex-col items-center gap-3 px-4 py-6 md:gap-4 md:px-6 md:py-8 text-center">
     <Image src={logoSrc} alt="logo" class="h-32 w-auto md:h-48" />
     <p class="text-light text-sm">
       © {new Date().getFullYear()}

src/components/Hero.astro

@@ -9,21 +9,24 @@ type Props = z.infer<ReturnType<typeof heroSchema>>
 const { title, description, cta, image, imageAlt } = Astro.props
 ---
 
-<Section id="hero" className="mt-16 p-0 md:mt-0 md:flex-row md:p-0">
-  <div class="mb-8 px-6 py-10 md:mb-0 md:w-1/2 md:p-24">
+<Section
+  id="hero"
+  className="mt-[var(--header-height)] p-0 md:mt-0 md:flex-col-reverse md:py-24 lg:flex-row lg:items-center"
+>
+  <div class="px-4 py-8 md:p-0 md:text-center lg:w-1/2 lg:text-start">
     <h1 class="mb-4 text-4xl font-bold leading-tight md:text-6xl" set:html={title} />
     <p class="text-brand-text mb-6">{description}</p>
     {
       cta && (
         <div class="flex w-full space-x-4">
-          <a href="#services" class="brand-btn w-full md:w-auto">
+          <a href="#services" class="brand-btn-outline lg:brand-btn w-full lg:w-auto">
             {cta?.title}
           </a>
         </div>
       )
     }
   </div>
-  <div class="relative hidden md:block md:w-1/2">
-    <Image src={image} alt={imageAlt} class="absolute h-full w-full object-cover" />
+  <div class="relative hidden md:block md:h-[450px] lg:w-1/2">
+    <Image src={image} alt={imageAlt} class="absolute h-full w-full object-contain" />
   </div>
 </Section>

src/components/Section.astro

@@ -13,7 +13,7 @@ const { title, description, className, id } = Astro.props
 
 <section
   class={cn(
-    'flex flex-col gap-6 py-10 px-6 md:p-24 md:gap-14',
+    'flex flex-col gap-6 py-12 px-4 md:py-24 md:px-16 lg:px-24 md:gap-12',
     className
   )}
   id={id}

src/components/ServiceCard.astro

@@ -9,7 +9,7 @@ const { title, charachteristics, highlighted = false, link } = Astro.props
 
 <div
   class:list={[
-    'flex h-full w-full flex-col border-2 px-7 py-8 md:max-w-[400px] md:min-h-[550px]',
+    'flex h-full w-full flex-col border-2 px-5 py-6 md:px-7 md:py-8 md:max-w-[400px] md:min-h-[550px]',
     'border border-transparent bg-card',
     { 'border-brand': highlighted },
   ]}