Change File card behaviour

src/assets/scss/custom.scss

 // Override default variables before the import
 $nav-pills-link-active-color: black;
 
-
-//* bootstrap 5's grid. To use, import the following line in the .module.scss */
-// @import "assets/scss/bootstrap5/bootstrap-grid";
-$grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 2000px
-);
-
 //Bootstrap 5 scss from: https://github.com/twbs/bootstrap/tree/main/scss
 @import "bootstrap5/functions";
 @import "bootstrap5/variables";

src/components/atoms/FileCard/style.module.scss

@@ -24,7 +24,7 @@
 
 .fileCard :global(.card-footer) {
   border-radius: 0.5rem !important;
-  background: $white;
+  background: transparent;
   border-width: 0rem;
 	padding: 0.5rem;
 	padding-top: 0;
@@ -48,7 +48,7 @@
   border-top-left-radius: 0.4rem;
   border-top-right-radius: 0.4rem;
 
-	max-height: 70%;
+	height: 120px;
 	object-fit: cover;
 }
 
@@ -56,4 +56,10 @@
   scrollbar-width: thin;
   scrollbar-color: $white $white;
   margin-top: 0.625rem;
+}
+
+@media (max-width: 576px) {
+	.fileCard :global(.card-img-top) {
+		height: 100px;
+	}
 }
\ No newline at end of file

src/components/molecules/CurrentDirectoryRow/index.tsx

@@ -25,7 +25,7 @@ const CurrentDirectoryRow: React.FC<{ select: SelectionProps }> = ({
           <Col
             xs={6}
             sm={6}
-            md={6}
+            md={4}
             lg={4}
             xl={3}
             key={id}