.news-link{ text-decoration: none; color: #3e3e3e; outline: none; transition: .3s cubic-bezier(.645,.045,.355,1); font: 700 18px/32px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; margin-bottom: 10px; display: block; } .lenta{ background: white; font: 14px/20px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; min-height: 100%; h3{ font: 14px/20px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; margin: 0; display: flex; .published_at{ transition: .3s; display: flex; min-height: 100%; max-width: 82px; min-width: 82px; font: 12px/17px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; color: #a8a8a8; align-items: center; justify-content: center; flex-direction: column; align-content: center; justify-items: center; text-align: center; padding: 0 3px; .commnets{ display: block; .icon{ width: 10px; height: 10px; fill: #a8a8a8; margin-right: 5px; } } } } .list-wrapper{ &>div{ padding: 12px 2px 12px 10px; transition: background-color 0.3s; a{ transition: 0.3s; flex-grow: 1; } &:hover{ .published_at{ color: hsla(0,0%,100%,.5) } background: #f6911f; a{ color: white; } } } } .all-news{ display: flex; padding: 30px; justify-content: center; a{ display: block; padding: 10px 20px; border-radius: 50px; background: #f5f5f5; color: #f6911f; } } }