fix: banner vertical margin (#403)

Author: DDonochVA

libs/blog/articles/feature-article/src/lib/article-details/article-details.component.html

@@ -1,4 +1,4 @@
-<div class="mt-8 grid grid-cols-12 gap-y-10 lg:gap-x-10">
+<div class="grid grid-cols-12 gap-y-10 lg:gap-x-10">
   <section
     aria-labelledby="article-title"
     class="order-1 col-span-12 grid w-full gap-4 overflow-auto lg:col-span-8"
@@ -63,7 +63,7 @@ <h2 id="article-title" class="flex text-[40px] font-bold">
         class="sticky top-24 mt-5 hidden flex-col gap-4 lg:flex"
         [ngClass]="{
           'top-24': !adBannerStoreVisible(),
-          'top-48': adBannerStoreVisible()
+          'top-48': adBannerStoreVisible(),
         }"
       >
         @if (articleDetails().anchors.length) {

libs/blog/shell/feature-shell-web/src/lib/root-shell.component.ts

@@ -31,8 +31,12 @@ import {
       </al-header>
     </div>
     <al-layout class="mt-20" [ngClass]="{ 'mt-40': adBannerVisible() }">
-      @if (slides(); as slides) {
-        <al-banner-carousel [banners]="slides" [msPerSlide]="msPerSlide()!" />
+      @if (slides()?.length && slides(); as slides) {
+        <al-banner-carousel
+          class="mb-4 inline-block"
+          [banners]="slides"
+          [msPerSlide]="msPerSlide()!"
+        />
       }
       <router-outlet />
     </al-layout>