@import "../../vars";
@import "../../mixins";

.news {
  padding-top: 70px;

    &__title {
        font-family: 'Montserrat';
        font-weight: 700;
        font-size: 48px;
        line-height: 100%;
        letter-spacing: -0.01em;
        color: $vmainGrey;
        align-self: start;
    }
}

.news-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.news-wrapper {
    margin-top: 42px;
    display: flex;
}

    .news-block {
        margin-right: 17px;
        height: 261px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        position: relative;

        &__img {
          width: 427px;
          height: 141px;
        }

        &__img-1 {
          background-image: url("../img/main/news/1.png");
          background-repeat: no-repeat;
          background-size: cover;
        }

         &__img-2 {
           background-image: url("../img/main/news/2.png");
           background-repeat: no-repeat;
           background-size: cover;
         }

         &__img-3 {
           background-image: url("../img/main/news/3.png");
           background-repeat: no-repeat;
           background-size: cover;
         }

         &__title {
          font-weight: 600;
          font-size: 20px;
          line-height: 24px;
          letter-spacing: -0.01em;
          margin-top: 24px;
         }

         &__title_1 {
          margin-bottom: 23px;
         }
    }

        .news-block-bottom {
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-right: 30px;
    
          &__link {
              font-size: 16px;
              line-height: 24px;
              letter-spacing: -0.01em;
              text-decoration-line: underline;
              color: $vmainGrey;
          }
    
          &__date {
              font-family: 'Muller';
              font-style: normal;
              font-weight: 400;
              font-size: 15px;
              line-height: 22px;
              color: $vMain2;
          }
      }
   
    .news__button {
      @include btn-orange-hover;
      padding: 13px 30px;
      border-radius: 9.375px;
      font-family: 'Muller';
      font-weight: 500;
      font-size: 13.125px;
      line-height: 13px;
      margin-top: 60px;

      &:hover {
        @include btn-orange;
        border: none;
        font-family: 'Muller';
        font-weight: 500;
        font-size: 13.125px;
        line-height: 13px;
        border: 1px solid $vactiveOrange;
      }
    }