.feed { position: relative; display: flex; align-items: center; padding: 1.5rem 0; overflow: hidden; line-height: 1; } .feed:hover .feed-title { opacity: 0.8; } .feed:hover .feed-right { margin-right: 1.6rem; } .feed:hover .feed-icon { transform: translateX(0.4rem); } .feed + .feed { border-top: 1px solid var(--light-gray-color); } .feed + .feed.feed-paged { margin-top: 3rem; border-top: 0; } .feed-calendar { display: flex; min-width: 45px; margin-right: 1.5rem; font-size: 1.1rem; font-weight: 800; color: var(--brand-color); white-space: nowrap; } .feed-calendar-month { margin-right: 0.4rem; text-transform: uppercase; } .feed-title { flex-grow: 1; padding-right: 1rem; margin-bottom: 0; overflow: hidden; font-size: 1.6rem; font-weight: 400; line-height: 1.3; text-overflow: ellipsis; letter-spacing: 0; white-space: nowrap; } .feed-right { display: flex; align-items: center; transition: margin 0.2s var(--animation-base); } .icon-star { width: 16px; height: 16px; margin-right: 1rem; color: var(--orange-color); } .public .icon-star { display: none; } .feed-length { font-size: 1.4rem; color: var(--secondary-text-color); white-space: nowrap; } .feed-icon { position: absolute; right: 0; width: 16px; height: 16px; color: var(--secondary-text-color); transition: transform 0.2s var(--animation-base); transform: translateX(2rem); }