fix: Adjust grid layout and item styles for better responsiveness (#662)

Author: tumms2021389

src/app/_samples/mediaco/components/gallery-grid/gallery-grid-component.scss

@@ -34,25 +34,20 @@
 .grid-container {
   flex: 1;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
   gap: 20px;
   padding: 24px;
   overflow-y: auto;
+  max-height: calc(100% - 150px);
 }
 
 .grid-item {
   position: relative;
-  display: flex;
   flex-direction: column;
   border: 1px solid #e0e0e0;
   border-radius: 1.5rem;
-  overflow: hidden;
-  background: white;
-  box-shadow:
-    0px 1px 2px 0px #0000004d,
-    0px 2px 6px 2px #00000026;
   transition: transform 0.2s;
-  height: 240px;
+  aspect-ratio: 4 / 3;
 
   &:hover {
     transform: translateY(-4px);
@@ -64,6 +59,7 @@
     height: 100%;
     object-fit: cover;
     display: block;
+    border-radius: 1.5rem;
   }
 
   p {