improving flip card responsiveness

Author: alopezo

src/app/maturity/maturity-main/maturity-main.component.css

@@ -190,8 +190,36 @@ button[mat-raised-button] {
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  flex-wrap: wrap;
   padding: 16px;
   margin: 16px;
+  gap: 8px;
+}
+
+/* Responsive adjustments for small laptop screens */
+@media (max-width: 1200px) {
+  .flip-card-container {
+    padding: 12px;
+    margin: 12px;
+    gap: 6px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .flip-card-container {
+    padding: 8px;
+    margin: 8px;
+    gap: 4px;
+  }
+}
+
+/* For very small laptops - stack cards vertically or show in single row */
+@media (max-width: 900px) {
+  .flip-card-container {
+    flex-direction: column;
+    padding: 8px;
+    margin: 8px;
+  }
 }
 
 /* Responsive adjustments */

src/app/util/flip-card/flip-card.component.scss

@@ -3,20 +3,59 @@
     width: 400px;
     height: 400px;
     margin: 1rem;
+    flex-shrink: 1;
+    border: none;
+    box-shadow: none;
+    background: transparent;
+    
     .mat-mdc-card-content {
         padding: 0;
     }
+    
+    // Remove Material card default styling
+    &.mat-mdc-card {
+        box-shadow: none;
+        border: none;
+        background: transparent;
+    }
+}
+
+/* Responsive sizing for smaller laptops and tablets */
+@media (max-width: 1400px) {
+    .flip-container {
+        width: 350px;
+        height: 350px;
+        margin: 0.75rem;
+    }
+}
+
+@media (max-width: 1200px) {
+    .flip-container {
+        width: 300px;
+        height: 320px;
+        margin: 0.6rem;
+    }
+}
+
+@media (max-width: 1024px) {
+    .flip-container {
+        width: 280px;
+        height: 300px;
+        margin: 0.5rem;
+    }
 }
 
 .flip-card {
     width: 100%;
     height: 100%;
     position: relative;
-    transform-origin: center center; // or 50% 50%
+    transform-origin: center center;
     transition: transform 0.6s;
     transform-style: preserve-3d;
-    background-color: rgb(18, 79, 107);
+    background: transparent;
     color: white;
+    border: none;
+    box-shadow: none;
 }
 
 .flipped .flip-card {
@@ -25,16 +64,38 @@
 
 .flip-card-front,
 .flip-card-back {
-    padding: 10px;
+    padding: 20px;
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     flex-direction: column;
+    font-size: 1rem;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+}
+
+/* Adjust padding and font sizes for smaller laptops */
+@media (max-width: 1200px) {
+    .flip-card-front,
+    .flip-card-back {
+        padding: 16px;
+        font-size: 0.9rem;
+    }
+}
+
+@media (max-width: 1024px) {
+    .flip-card-front,
+    .flip-card-back {
+        padding: 12px;
+        font-size: 0.85rem;
+    }
 }
 
 .flip-card-front {