- Card

src/css/app.scss

@@ -1135,6 +1135,10 @@ h3 {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
   margin: 1px;
   object-position: 50% 5% !important;
+  object-fit: contain !important;
+  @media (max-width: 600px) {
+    /* Versione Mobile */
+  }
 }
 
 .imgprofile_small {
@@ -2226,6 +2230,62 @@ $coloreprincipale: lightblue;
   transition: transform 0.3s ease;
 }
 
+.cards-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.card-item {
+  display: flex;
+  flex-direction: column;
+  max-width: 200px; /* Massima larghezza per la card */
+  margin: 0 10px; /* Spazio tra le card */
+  text-align: center;
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  gap: 1rem;
+  height: 100%;
+  padding: 1rem;
+}
+
+.flex-card {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  margin: 0 0.5rem;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+/* Aggiungi questi stili per gestire lo scroll orizzontale se necessario */
+.q-carousel__slide {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+}
+
+.row.no-wrap {
+  flex-wrap: nowrap !important;
+  gap: 1rem;
+}
+
+.card-width-200 {
+  width: 100%;
+  max-width: 200px;
+}
+
+.card-width-250 {
+  width: 100%;
+  max-width: 250px;
+}
+
 .my-card-elem:hover {
   transform: scale(1.05);
 }
@@ -2237,7 +2297,7 @@ $coloreprincipale: lightblue;
 
 .img-container .q-img {
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
 }
 
 .swipe-indicator {