.friend-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-top:2rem}.friendurl-title{text-decoration:none;color:inherit;transition:all .3s ease;display:block;position:relative}.friend-image{margin:0;padding:0;cursor:zoom-in}.frienddiv{display:flex;padding:1.5rem;border-radius:1rem;background:rgba(255,255,255,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px rgba(0,0,0,5%);transition:all .4s cubic-bezier(.175,.885,.32,1.275);height:100%;position:relative;overflow:hidden}.frienddiv::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:1rem;background:linear-gradient(135deg,rgba(var(--color-primary-300,100,100,255),.05) 0%,transparent 100%);z-index:-1;opacity:0;transition:opacity .3s ease;pointer-events:none}.frienddiv:hover::after{opacity:1}.dark .frienddiv{background:rgba(30,41,59,.7);border:1px solid rgba(255,255,255,8%)}.frienddiv:hover{transform:translateY(-6px)scale(1.02);box-shadow:0 15px 35px rgba(0,0,0,.1);border:1px solid rgba(var(--color-primary-500),.3)}.dark .frienddiv:hover{background:rgba(30,41,59,.85);box-shadow:0 15px 35px rgba(0,0,0,.2);border:1px solid rgba(var(--color-primary-500),.3)}.frienddivleft{margin-right:1.25rem;display:flex;align-items:center}.myfriend{width:70px;height:70px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 5px 15px rgba(var(--color-primary-500),.2);transition:transform .3s ease,box-shadow .3s ease}.frienddiv:hover .myfriend{transform:scale(1.05);box-shadow:0 8px 25px rgba(var(--color-primary-500),.3)}.frienddivright{display:flex;flex-direction:column;justify-content:center;flex:1;overflow:hidden}.friendname{font-weight:700;font-size:1.2rem;margin-bottom:.4rem;color:var(--color-neutral-900);position:relative;transition:color .3s ease}.friendurl-title:hover .friendname{color:var(--color-primary-600)}.dark .friendname{color:#fff}.dark .friendurl-title:hover .friendname{color:var(--color-primary-400)}.friendinfo{font-size:.95rem;color:var(--color-neutral-600);line-height:1.5;opacity:.9;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;transition:opacity .3s}.frienddiv:hover .friendinfo{opacity:1}.dark .friendinfo{color:rgba(255,255,255,.75)}@media(max-width:768px){.friend-list{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}.frienddiv{padding:1rem}.myfriend{width:60px;height:60px}}