.resource-cards { display: flex; flex-flow: wrap; width: 100%; } .resource-card { display: flex; max-width: 420px; width: 40%; min-width: 300px; height: 130px; border: 1px solid #ced4d9; border-radius: @border-radius-base; font-size: 12px; color: #777; margin: 20px 40px 10px 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-description { display: block; color: #697b8c; padding-right: 8px; }