.links{ &-content{ .content-style(); &-data { display: flex; width: 100%; box-sizing: border-box; padding: 64px 80px; font-size: 18px; justify-content: space-between; flex-wrap: wrap; img { display: flex; width: 100%; height: 100%; } &-item{ display: flex; padding: 20px; margin-right: 10px; border-radius: 10px; margin-bottom: 20px; background: #ffffff; border: 1px solid #F8F9FB; cursor: pointer; position: relative; top: 0; transition: ease-in-out; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; &:hover { background: #F8F9FB; top: -10px; box-shadow: 0 10px 10px 0 rgba(50,50,50,0.1); } a { width: 100%; height: 100%; text-decoration: none; color: #333333; } .card { display: flex; .user-link-image { display: flex; width: 48px; height: 48px; img { border-radius: 50%; } } .user-link-info { display: flex; flex-direction: column; min-width: 166px; padding-left: 10px; padding-top: 6px; h1 { max-width: 170px; color: #3C4858; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 16px; } span { max-width: 170px; color: #718096; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } } } } &-info { width: 100%; margin-top: 20px; } } } }