Merge pull request #179 from P-Appadoo/main

Fixed branding card layout on md breakpoint

Author: MrSunshyne

packages/frontendmu-nuxt/components/cards/BrandingCard.vue

@@ -21,8 +21,11 @@ function getAssetPath(version: string) {
 </script>
 
 <template>
-  <div class="grid md:grid-cols-3 gap-8 border border-verse-900 dark:border-verse-400 rounded-lg p-8">
-    <div v-if="asset" class="flex flex-col col-span-1 gap-4 justify-center">
+  <div class="grid md:grid-cols-[auto_auto] gap-8 border border-verse-900 dark:border-verse-400 rounded-lg p-8">
+    <div
+      v-if="asset"
+      class="flex flex-col gap-4 justify-center"
+    >
       <h3 class="font-bold text-xl md:text-3xl">
         {{ asset.name }}
       </h3>
@@ -32,8 +35,12 @@ function getAssetPath(version: string) {
 
       <div class="flex justify-start items-center text-sm uppercase gap-4">
         <span>Download</span>
-        <a v-for="version in asset.versions" :key="version" :href="getAssetPath(version)"
-           class="border px-4 py-1 cursor-pointer hover:bg-gray-100 rounded-md flex items-center gap-2" download
+        <a
+          v-for="version in asset.versions"
+          :key="version"
+          :href="getAssetPath(version)"
+          class="border px-4 py-1 cursor-pointer hover:bg-gray-100 rounded-md flex items-center gap-2"
+          download
         >
           <Icon name="carbon:download" />
           <span>
@@ -42,8 +49,11 @@ function getAssetPath(version: string) {
         </a>
       </div>
     </div>
-    <div class="col-span-2 flex justify-center">
-      <img class="max-h-64 w-full" :src="defaultPath">
+    <div class="flex justify-center">
+      <img
+        class="max-h-64 w-full"
+        :src="defaultPath"
+      >
     </div>
   </div>
 </template>