channel teaser tweaks, spacing

client/src/components/atoms/CategoryImage.tsx

@@ -135,6 +135,8 @@ const categoryImageFile = (category: string) => {
         case 'Visual Arts & Design':
         case 'visualart':
             return visualart
+        // technically no category
+        // but corresponding to title of a channel
         case 'AI For Good':
             return aiforgood
         default:

client/src/components/organisms/AssetsLatest.module.scss

@@ -34,7 +34,7 @@
     border-bottom: 1px solid $brand-grey-lighter;
     padding-bottom: $spacer / 3;
     margin-top: $spacer * 3;
-    margin-bottom: $spacer;
+    margin-bottom: $spacer / 2;
 
     @media (min-width: $break-point--small) {
         text-align: left;

client/src/components/organisms/ChannelTeaser.module.scss

@@ -4,7 +4,7 @@
     width: 100%;
 
     @media (min-width: $break-point--medium) {
-        padding-top: $spacer / 2;
+        padding-top: $spacer * 2;
         display: flex;
     }
 
@@ -30,6 +30,7 @@
         }
     }
 
+    // style channel teaser following another one
     + .channel {
         border-top: 1px solid $brand-grey-lighter;
         margin-top: $spacer * 2;

client/src/routes/Home.module.scss

@@ -12,6 +12,12 @@
         margin: 0;
         visibility: hidden;
     }
+
+    // grab the channel teaser on front page
+    // stylelint-disable-next-line
+    article > div > h2 + div {
+        padding-top: $spacer / 2;
+    }
 }
 
 .title {