.post-column { margin-bottom: 30px; } .post { border-radius: 5px; box-shadow: @shadow-base; display: flex; flex-direction: column; height: 100%; overflow: hidden; } .post-wrapper { background-color: @white-color; flex-grow: 1; padding: 20px; } .post-tag { background-color: var(--primary-color); border-radius: 15px; color: @white-color; display: inline-block; font-size: 12px; font-weight: 700; line-height: 1; margin-bottom: 8px; padding: 4px 8px; } .post-header { margin-bottom: 10px; } .post-title { font-size: 18px; margin-bottom: 0; } .post-meta { background-color: @white-color; border-top: 1px solid @mid-gray-color; color: @secondary-text-color; display: flex; font-size: 13px; font-weight: 700; padding: 10px 30px; } .post-meta-length:before { content: "\02022"; font-family: serif; padding: 0 8px; } .post-date { color: @secondary-text-color; display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; } .post-excerpt { color: @secondary-text-color; font-size: 14px; } .post-content { font-size: 15px; line-height: 1.8; } .post-tags { margin-top: 15px; .tag { font-weight: 700; & + .tag { margin-left: 10px; } &:before { content: "#"; } } } .post-footer { align-items: center; background-color: @white-color; border-top: 1px solid @light-gray-color; display: flex; height: 42px; justify-content: space-between; padding: 0 20px; } .post-link { font-size: 11px; font-weight: 700; letter-spacing: .5px; line-height: 1; text-transform: uppercase; } .post-author { display: flex; margin-right: 2px; } .post-author-link { display: block; height: 28px; margin: 0 -4px; position: relative; width: 28px; &:first-child { z-index: 10; } &:nth-child(2) { z-index: 9; } &:nth-child(3) { z-index: 8; } &:nth-child(4) { z-index: 7; } &:nth-child(5) { z-index: 6; } } .post-author-image { border: 2px solid @white-color; border-radius: 50%; }