UI: Fix tool list layout on course home

assets/css/scss/molecules/_course_tool.scss

@@ -1,5 +1,10 @@
+.grid-cols-course-tools {
+  @apply flex flex-wrap gap-y-8 justify-between;
+  column-gap: min(32px, 100%);
+}
+
 .course-tool {
-  @apply flex flex-col gap-4 relative;
+  @apply flex flex-col flex-none gap-4 relative w-[120px];
 
   &__link {
     @apply border border-solid border-gray-30 rounded-lg flex place-items-center justify-center shadow-lg w-[7.5rem] h-[7.5rem];

assets/vue/views/course/CourseHome.vue

@@ -61,7 +61,7 @@
 
       <hr class="mt-0 mb-4" />
 
-      <div class="grid gap-y-12 sm:gap-x-5 md:gap-x-16 md:gap-y-12 justify-between grid-cols-course-tools">
+      <div class="grid-cols-course-tools">
         <Skeleton
           v-for="v in 30"
           :key="v"
@@ -208,7 +208,7 @@
 
       <div
         id="course-tools"
-        class="grid gap-y-12 sm:gap-x-5 md:gap-x-16 md:gap-y-12 grid-cols-course-tools"
+        class="grid-cols-course-tools"
       >
         <CourseTool
           v-for="(tool, index) in tools"