img {
  border-radius: 8px;
  max-width: 100%;
  display: block;
  object-fit: cover;
  max-width: 100%;
  height: auto;
}

/* Grid de 3 columnas */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

/* Estilos para las imágenes dentro del grid */
.grid-container img {
display: block;        
margin: 0 auto;        
width: 100px;          
height: 100px;         
object-fit: cover;     
}

/* Botones con borde redondeado y contenido centrado */
.md-button.md-button--primary {
border-radius: 10px;
text-align: center;    /* Centra el texto dentro del botón */
padding: 15px;         /* Espaciado interno */
/* Se ha eliminado el fondo blanco */
}

/* Estilos para el enlace del botón, usando Flexbox para centrar todos los elementos */
.md-button.md-button--primary a {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
align-items: center;
}

/* Contenedor para el nombre y el ícono: se muestran en línea y centrados */
.card-info {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;  /* Espaciado entre el nombre y el ícono */
margin-top: 10px;
}

/* Estilos para el título */
.card-info h3 {
margin: 0;
font-size: 1.2em;
}

/* Estilos para el estado (únicamente el ícono) */
.card-info .status {
margin: 0;
font-size: 1em;
}

/* Colores para los íconos */
.status.ready i {
color: green;
}
.status.wip i {
color: orange;
}