Style mediacenter views, update criteria row

client/src/components/competences/PerformanceCriteriaRow.vue

@@ -31,7 +31,7 @@ const profilePageSlug = route.params["competenceProfilePageSlug"];
         <h4 class="text-bold mb-2">
           {{ criteria.competence_id }} {{ criteria.title }}
         </h4>
-        <p>
+        <p class="hidden lg:block">
           Lerneinheit:
           <router-link class="link" :to="criteria.learning_unit.frontend_url">
             {{ criteria.learning_unit.title }}
@@ -39,6 +39,12 @@ const profilePageSlug = route.params["competenceProfilePageSlug"];
         </p>
       </div>
     </div>
+    <p class="lg:hidden mb-2">
+      Lerneinheit:
+      <router-link class="link" :to="criteria.learning_unit.frontend_url">
+        {{ criteria.learning_unit.title }}
+      </router-link>
+    </p>
     <span class="whitespace-nowrap">
       <router-link
         class="link"

client/src/pages/mediaLibrary/MLCategoryDetailPage.vue

@@ -74,7 +74,7 @@ function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
             <span>zurück</span>
           </router-link>
         </nav>
-        <div class="flex justify-between">
+        <div class="flex md:flex-col lg:flex-row justify-between">
           <div class="lg:w-6/12">
             <h3 class="font-normal text-large text-gray-900 mb-3">Handlungsfeld</h3>
             <h1 class="mb-4 lg:mb-8" data-cy="hf-title">{{ mediaCategory.title }}</h1>
@@ -82,7 +82,7 @@ function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
           </div>
           <div>
             <img
-              class="hidden lg:block float-right"
+              class="hidden md:block float-left lg:float-right md:mt-8 lg:mt-0"
               :src="'/static/icons/demo/category-large.png'"
               alt=""
             />

client/src/pages/mediaLibrary/MLCategoryIndexPage.vue

@@ -31,7 +31,7 @@ watch(dropdownSelected, (newValue) =>
       <!--      <ItDropdownSelect v-model="dropdownSelected" :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
     </div>
     <div v-if="mediaStore.mediaLibraryPage">
-      <ul class="grid gap-5 grid-cols-1 lg:grid-cols-4">
+      <ul class="grid gap-5 grid-cols-1 md:grid-cols-4">
         <li v-for="cat in categories" :key="cat.id" class="bg-white p-4">
           <router-link :to="cat.frontend_url" :data-cy="`${cat.title}-link`">
             <img