update media card style

frontend/rabbi_gerzi/src/views/MediaPage.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { onMounted } from 'vue'
+import SiteHeader from '@/components/SiteHeader.vue'
 import { useMediaSetsStore } from '@/stores/mediaSets'
 
 const mediaSetsStore = useMediaSetsStore()
@@ -13,6 +14,7 @@ onMounted(() => {
 
 <template>
   <div class="media-page">
+    <SiteHeader />
     <main class="media-page__main" data-cy="media-page">
       <header class="media-page__header">
         <h1 class="media-page__heading">Torah Media</h1>
@@ -30,7 +32,7 @@ onMounted(() => {
         <p v-else-if="sets.length === 0" class="media-page__status">
           No media sets are available yet.
         </p>
-        <div v-else class="media-page__rail">
+        <div v-else class="media-page__grid" data-cy="media-set-grid">
           <article
             v-for="mediaSet in sets"
             :key="mediaSet.id"
@@ -62,12 +64,11 @@ onMounted(() => {
 
 .media-page__main {
   min-height: 100vh;
-  padding: 1.75rem 0 2.5rem;
+  padding: 5.1rem 4.15rem 5rem;
 }
 
 .media-page__header {
-  padding: 0 3.75rem;
-  text-align: right;
+  text-align: center;
 }
 
 .media-page__heading {
@@ -80,7 +81,7 @@ onMounted(() => {
 }
 
 .media-page__sets {
-  margin-top: 5.3rem;
+  margin-top: 5rem;
 }
 
 .media-page__status {
@@ -99,16 +100,15 @@ onMounted(() => {
   border-color: #e5b8b8;
 }
 
-.media-page__rail {
-  display: flex;
-  gap: 3.75rem;
-  overflow-x: auto;
-  padding: 0 3.75rem 2.5rem;
-  scrollbar-width: thin;
+.media-page__grid {
+  display: grid;
+  max-width: 1745px;
+  margin: 0 auto;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 2.7rem 3.75rem;
 }
 
 .media-page__card {
-  flex: 0 0 min(77.6vw, 843px);
   min-height: 448px;
   padding: 3.1rem 3rem 2.7rem;
   background: var(--color-white);
@@ -145,24 +145,19 @@ onMounted(() => {
 
 @media (max-width: 768px) {
   .media-page__main {
-    padding-top: 1.25rem;
-  }
-
-  .media-page__header {
-    padding: 0 1rem;
+    padding: 3rem 1rem;
   }
 
   .media-page__sets {
     margin-top: 3rem;
   }
 
-  .media-page__rail {
+  .media-page__grid {
+    grid-template-columns: 1fr;
     gap: 1rem;
-    padding: 0 1rem 2rem;
   }
 
   .media-page__card {
-    flex-basis: calc(100vw - 2rem);
     min-height: 390px;
     padding: 2.5rem 1.5rem;
   }