.main-view{ display: flex; flex-wrap: wrap; .group{ position: relative; width: 40%; &::after{ content: ""; position: absolute; height: calc(100% - 30px); top: 0; bottom: 0; left: 0; display: block; width: 1px; background-color: #e8e8e8; z-index: 1; margin: auto; } } } .news-item{ &.main{ width: 100%; box-shadow: black 0 0 14px -5px; a{ color: white; } } z-index: 1; text-align: left; display: flex; align-items: flex-end; justify-content: flex-start; align-content: flex-end; flex-wrap: wrap; overflow: hidden; position: relative; picture:after { position: absolute; transition: 0.3s; opacity: 1; content:""; height:100%; width:100%; top:0; left:0; background: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5)); } picture:hover::after{ opacity: 0.4; } .meta{ position: absolute; bottom: 0; left: 0; color: #fff; padding: 15px 30px; .title{ font: 700 28px/32px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; margin-bottom: 10px; } .lead{ margin-bottom: 15px; font: 18px/25px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; color: hsla(0,0%,100%,.8); font-size: 16px; line-height: 150%; } .published_at{ color: hsla(0,0%,100%,.5); font: 12px/17px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; .commnets{ margin-left: 20px; } .icon{ width: 10px; height: 10px; fill: #a8a8a8; margin-right: 5px; } } } &.main{ margin-bottom: 30px; } &.high{ .meta{ .title{ font-weight: 700 !important; } } } &.high,&.low{ width: 60%; align-content: center; &:hover{ .published_at{ color: #3b5573; } } background: white; .meta{ position: relative; color: #3e3e3e; padding: 50px 15px 15px 15px; .title{ font: 24px/34px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; } .lead{ font-size: 16px; line-height: 150%; color: #3e3e3e; } .published_at{ position: absolute; top:15px; left:15px; color: #aeaeae; } } } &.low{ width: 100%; padding-bottom: 15px; .meta{ .title{ font: 18px/26px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; margin: 0; } } &:nth-child(1)::after{ content: ""; position: absolute; width: calc(100% - 15px); bottom: 0; left: 0; display: block; height: 1px; background-color: #e8e8e8; z-index: 1; } } } #lenta-container{ &::-webkit-scrollbar { display: none; } -ms-overflow-style: none; scrollbar-width: none; overflow-y: scroll; & + .shadow{ position: relative; width: 100%; content: ""; top: -50px; left: 0; right: 0; margin: auto; height: 50px; background: linear-gradient(transparent,#fff); } } .partner-news{ margin-top: 30px; &>div{ flex-grow: 1; } .partner-news-item{ position: relative; background-color: white; height: 100%; padding-bottom: 30px; .meta{ padding: 15px; h2{ font: 18px/22px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; } .published_at{ position: absolute; bottom: 15px; left: 15px; color: #a8a8a8; .icon{ width: 10px; height: 10px; fill: #a8a8a8; margin-right: 5px; } } } } } .wide-widget{ margin-top: 30px; .cont{ position: relative; } picture:after { position: absolute; transition: 0.3s; opacity: 1; content:""; height:100%; width:100%; top:0; left:0; background: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5)); } picture:hover::after{ opacity: 0.4; } .meta{ position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; .topic{ text-transform: uppercase; position: absolute; width: 210px; height: 40px; bottom: 5px; left: 0; right: 0; margin: auto; font: 12px/17px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; color: hsla(0,0%,100%,.5); display: flex; justify-content: center; align-items: center; &::before,&::after{ content: ""; display: block; position: absolute; height: 100%; width: 1px; background-color: hsla(0,0%,100%,.2); top: 0; left: 0; } &::after{ right: 0; left: unset; } } .title{ position: absolute; bottom: 60px; left: 20px; color: white; margin: 0; max-width: 541px; font: 700 30px/36px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; a{ color: white; } } .commnets{ position: absolute; right: 20px; bottom: 20px; color: #a8a8a8; font: 12px/17px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; .icon{ width: 15px; height: 15px; fill: #a8a8a8; margin-right: 5px; } } } .adv .cont{ background: white; height: 100%; } } .text-news-widget{ margin-top: 30px; &>div>.cont{ background: white; padding: 0 30px; } .widget-title{ font: 700 18px/22px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; color: #3e3e3e; padding: 30px 15px; } .text-widget-item{ .cont{ padding: 0 15px 30px 15px; position: relative; height: 100%; .meta{ .title{ font: 16px/19px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; color: #3e3e3e; } } .published_at{ position: absolute; width: 100%; bottom: 15px; font: 14px/17px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; color: #a8a8a8; .comments{ position: absolute; right: 45px; .icon{ width: 10px; height: 10px; fill: #a8a8a8; margin-right: 5px; } } } } } } .topic-widget{ margin-top: 30px; .cont{ position: relative; } picture{ filter: brightness(0.6); } .content{ position: absolute; bottom: 0; left: 0; padding: 30px; } .topic-title{ max-width: 608px; font: 36px/43px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; color: #fff; margin-bottom: 50px; } .topic-news{ display: flex; .cont{ height: 100%; padding-bottom: 30px; } .title{ margin: 0; line-height: 23px; a{ font: 700 16px/19px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; color: #fff; line-height: 0; } } .comments{ color: #fff; position: absolute; bottom: 0; margin: 0; .icon{ width: 10px; height: 10px; fill: #fff; margin-right: 5px; } } } }