.resource-cards { display: flex; flex-flow: wrap; width: 100%; } .resource-card { display: flex; max-width: 500px; width: ~"calc(50% - 24px)"; min-width: 400px; height: 130px; border: 1px solid @border-color-base; border-radius: @border-radius-base; font-size: 12px; color: #777; margin: 24px 24px 0 0; vertical-align: middle; transition: all 0.3s ease; position: relative; overflow: hidden; } .resource-card:hover { box-shadow: 0 3px 8px #d3ddeb; border-color: transparent; } .resource-card:hover .resource-card-title { color: @primary-color; } .resource-card.disabled { opacity: 0.45; pointer-events: none; } .resource-card-cover, .resource-card-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 130px; } .resource-card-cover img { width: 68px; } .resource-card-content { display: flex; flex-flow: column; justify-content: center; } .resource-card-title { display: block; font-size: 16px; color: @site-text-color; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.2; margin-bottom: 6px; } .resource-card-hot-badge { background: #f50; border-radius: 2px; padding: 0 3px; color: #fff; font-size: 12px; line-height: 20px; margin-left: 2px; vertical-align: top; } .resource-card-description { display: block; color: #697b8c; padding-right: 16px; }