FRONTEND_MVC/assets/less/components/main_page.less

.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;
      }
    }
  }
}