.testimonial-card { border-radius: var(--radius-md); padding: 1.25rem; background: var(--color-bg-card); display: flex; flex-direction: column; gap: 0.75rem; width: clamp(240px, 30vw, 320px); flex-shrink: 0; transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease; } .testimonial-card:hover { background: var(--color-bg-elevated); border-color: var(--color-border-strong); } .testimonial-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .testimonial-user { display: flex; align-items: center; gap: 0.625rem; min-width: 0; } .testimonial-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--color-border); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: var(--color-fg); flex-shrink: 0; overflow: hidden; } .testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; } .testimonial-names { display: flex; flex-direction: column; min-width: 0; } .testimonial-name { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .testimonial-handle { font-size: 0.75rem; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .testimonial-text { font-size: 0.875rem; color: var(--color-muted); line-height: 1.55; }