.card-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px; padding: 32px; } .card-link { text-decoration: none; color: inherit; display: block; } .item-card { cursor: pointer; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; height: 100%; } .item-card:hover { transform: translateY(-5px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } .card-content { display: flex; align-items: center; gap: 16px; padding: 8px 0; } .card-icon { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; &.material-icon { display: flex; justify-content: center; align-items: center; font-size: 48px; color: #1976d2; } } .card-title { font-size: 1.1rem; font-weight: 500; line-height: 1.4; } .default-avatar-icon { display: flex; justify-content: center; align-items: center; font-size: 32px; color: #666; }