/* Version: 2026.05.08 */
.grix {
width: 64%;
margin: 0 auto 2rem auto;
text-align: center;
}

.grid {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 3rem;
padding: 4rem 1.5rem;
max-width: 85rem;
margin: 0 auto;
}

.projects-card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2rem;
border-radius: 1.25rem;
min-height: 18rem;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.projects-card:hover {
transform: translateY(-0.25rem);
box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.10);
}

.projects-card-icon1 {
position: relative;
width: 4rem;
height: 4rem;
margin-bottom: 1.25rem;
}

.projects-card p {
opacity: 0.85;
}

/* ==========================================
   MEDIA QUERY PER DISPOSITIVI MOBILE 
   ========================================== */
@media (max-width: 768px) {
  .grix {
    width: 90%; /* Allarga l'introduzione per sfruttare lo spazio su mobile */
    margin-bottom: 1rem;
  }

  .grid {
    /* Forza la singola colonna verticale se preferisci un controllo netto, 
       riducendo anche il padding e il gap che su mobile sarebbero eccessivi */
    grid-template-columns: 1fr; 
    gap: 1.5rem;
    padding: 2rem 1rem;
  }

  .projects-card {
    min-height: auto; /* Evita altezze fisse eccessive su schermi piccoli */
    padding: 1.5rem;  /* Compensa lo spazio interno */
  }
}