VNT-B2B News

Novinky

<section class="news">
    <div class="news__background">
        <div class="news__content --content">
            <div class="news__wrapper">
                <div class="news__top">
                    <h2 class="news__title">
                        <a href="#" class="news__title-link">
                            Novinky z firmy
                        </a>
                    </h2>
                    <a href="#" class="news__link">
                        Zobrazit všechny novniky
                    </a>
                </div>
                <div class="news__bottom --row">
                    <div class="news__item news-item  --column --w-12 --w-s-6 --w-l-3">
                        <div class="news-item__wrapper --flex --flex-column">
                            <h3 class="news-item__title">
                                <a href="#" class="news-item__title-link">
                                    Nadpis novinky
                                </a>
                            </h3>
                            <div class="news-item__date">
                                20. 1. 2023
                            </div>
                            <div class="news-item__perex">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
                            </div>
                            <a href="#" class="news-item__link">
                                Zobrazit více
                                <span class="news-item__arrow arrow arrow--more"></span>
                            </a>
                        </div>

                    </div>
                    <div class="news__item news-item  --column --w-12 --w-s-6 --w-l-3">
                        <div class="news-item__wrapper --flex --flex-column">
                            <h3 class="news-item__title">
                                <a href="#" class="news-item__title-link">
                                    Nadpis novinky
                                </a>
                            </h3>
                            <div class="news-item__date">
                                20. 1. 2023
                            </div>
                            <div class="news-item__perex">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
                            </div>
                            <a href="#" class="news-item__link">
                                Zobrazit více
                                <span class="news-item__arrow arrow arrow--more"></span>
                            </a>
                        </div>

                    </div>
                    <div class="news__item news-item  --column --w-12 --w-s-6 --w-l-3">
                        <div class="news-item__wrapper --flex --flex-column">
                            <h3 class="news-item__title">
                                <a href="#" class="news-item__title-link">
                                    Nadpis novinky
                                </a>
                            </h3>
                            <div class="news-item__date">
                                20. 1. 2023
                            </div>
                            <div class="news-item__perex">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
                            </div>
                            <a href="#" class="news-item__link">
                                Zobrazit více
                                <span class="news-item__arrow arrow arrow--more"></span>
                            </a>
                        </div>

                    </div>
                    <div class="news__item news-item  --column --w-12 --w-s-6 --w-l-3">
                        <div class="news-item__wrapper --flex --flex-column">
                            <h3 class="news-item__title">
                                <a href="#" class="news-item__title-link">
                                    Nadpis novinky
                                </a>
                            </h3>
                            <div class="news-item__date">
                                20. 1. 2023
                            </div>
                            <div class="news-item__perex">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
                            </div>
                            <a href="#" class="news-item__link">
                                Zobrazit více
                                <span class="news-item__arrow arrow arrow--more"></span>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

</section>

.news{
  padding-top: 1.5rem;
  @include media($large){
    padding-top: 3.5rem;
  }
}


.news__background{
  padding-top: 2rem;
  padding-bottom: 2rem;
  background: linear-gradient(90deg, rgba(68,177,232,1) 0%, rgba(184,57,134,1) 100%);

  @include media($medium){
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

.news__top{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.news__bottom{
  row-gap: 1.6rem;

}

.news__title-link{
  color: $color__text-light;
  font-weight: 700;
  font-size: 2.2rem;

  @include media($large){
    font-size: 2.8rem;
  }
}

.news__link{
  color: $color__text-light;
  text-decoration: underline;
}

// news-item

.news-item__wrapper{
  border-radius: 0.8rem;
  background: $color__bg;
  padding: 1.5rem 1.5rem 1rem 1.8rem;
  overflow: hidden;
}

.news-item__title{
  margin-bottom: 0.4rem;
}

.news-item__title-link{
  font-weight: 700;
  font-size: 1.8rem;
  color: $color__primary;

  @include media($large){
    font-size: 2.3rem;
  }
}

.news-item__date{
  margin-bottom: 1.3rem;
  color: $color__text-dark;
  font-weight: 700;
}

.news-item__perex{
  margin-bottom: 1.3rem;
}

.news-item__link{
  display: flex;
  align-items: center;
  text-decoration: underline;
  position: relative;
  max-width: 9rem;
}

.news-item__link:hover .news-item__arrow,
.news-item__link:focus .news-item__arrow,
.news-item__link:active .news-item__arrow{
  border-color: $color__link-h;
  &:before{
    background: $color__link-h;
  }
}