Announcements

<div class="announcements">
    <h2 class="announcements__header">Announcements</h2>
    <div class="announcement__carousel carousel carousel--minimal carousel--dark js-announcement-carousel">
        <div class="announcement__slide js-slides">
            <div class="announcements__item">
                <a href="#" class="announcements__link">
                    <h3 class="announcements__title">Announcement 1 Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
                </a>
                <div class="announcements__meta">
                    XX days ago in
                    <a href="#">category</a>
                </div>
            </div>

            <div class="announcements__item">
                <a href="#" class="announcements__link">
                    <h3 class="announcements__title">Announcement 2 Numquam eligendi necessitatibus magnam laboriosam dolores debitis unde ex illo laborum! Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
                </a>
                <div class="announcements__meta">
                    XX days ago in
                    <a href="#">category</a>
                </div>
            </div>

            <div class="announcements__item">
                <a href="#" class="announcements__link">
                    <h3 class="announcements__title">Announcement 3 Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
                </a>
                <div class="announcements__meta">
                    XX days ago in
                    <a href="#">category</a>
                </div>
            </div>

            <div class="announcements__item">
                <a href="#" class="announcements__link">
                    <h3 class="announcements__title">Announcement 4 Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
                </a>
                <div class="announcements__meta">
                    XX days ago in
                    <a href="#">category</a>
                </div>
            </div>

            <div class="announcements__item">
                <a href="#" class="announcements__link">
                    <h3 class="announcements__title">Announcement 5 Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
                </a>
                <div class="announcements__meta">
                    XX days ago in
                    <a href="#">category</a>
                </div>
            </div>
        </div>
    </div>
    <div class="announcements__footer">
        <div class="announcements__actions">
            <a href="#" class="btn btn-link"
                >See More
                <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
            </a>
        </div>
    </div>
</div>

.announcements {
  background-image: repeating-linear-gradient(
    to right,
    rgba($color-blue-light, 0.3),
    rgba($color-blue-light, 0.3) 32px,
    rgba($color-blue-light, 0.6) 32px,
    rgba($color-blue-light, 0.6) 64px
  );
  background-size: 416px 416px;
  background-repeat: no-repeat;
  margin-bottom: 12rem;

  @media (min-width: $breakpoint-tablet) {
    padding-left: 64px;
  }
}

.announcements__link {
  color: $color-base-blue;
}

.announcements__header {
  @include typeDisplay(true);
  margin-bottom: 2.4rem;
  color: $color-base-white;
  background-color: $color-blue-medium;
  padding: 2.4rem;
  min-height: 15rem;
  text-transform: uppercase;
}

.announcement__carousel {
  width: 32rem;
  background-color: $color-base-white;
  margin: 0 auto;

  @media (min-width: $breakpoint-tablet) {
    margin: 0;
  }
}

.announcements__item {
  position: relative;
  padding: 2.4rem;
  background-color: $color-base-white;
  min-height: 25.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 32rem;
  margin: 0 auto;

  @media (min-width: $breakpoint-tablet) {
    margin: auto;
  }
}

.announcements__title {
  @include typeHeadline(true);
}

.announcements__footer {
  width: 32rem;
  background-color: $color-grey-light;
  text-align: right;
  margin: 0 auto;

  @media (min-width: $breakpoint-tablet) {
    margin: 0;
  }
}

$(document).ready(function () {
  $(".js-announcement-carousel").each(function () {
    const $carousel = $(this);
    const $slides = $carousel.find(".js-slides");
    $slides.slick({
      adaptiveHeight: true,
    });
  });
});