Events

<div class="events-hp">
    <h2 class="events-hp__header">Events</h2>
    <div class="events-hp__wrap">
        <ul class="events-hp__list">
            <li class="events-hp__item">
                <a href="#" class="events-hp__link">
                    <span class="events-hp__date">JUL 12</span>
                    <span class="events-hp__title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, error!</span>
                </a>
            </li>
            <li class="events-hp__item">
                <a href="#" class="events-hp__link">
                    <span class="events-hp__date">JUL 23</span>
                    <span class="events-hp__title">Consequatur voluptatum ut vitae at quibusdam atque quos nostrum maiores?</span>
                </a>
            </li>
            <li class="events-hp__item">
                <a href="#" class="events-hp__link">
                    <span class="events-hp__date">AUG 04</span>
                    <span class="events-hp__title">Sapiente molestiae nemo blanditiis veritatis voluptatem quod possimus eius quasi!</span>
                </a>
            </li>
        </ul>
        <div class="events-hp__actions">
            <a href="#" class="btn btn-link"
                >See More
                <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
            </a>
        </div>
    </div>
</div>

.events-hp {
  margin-bottom: 8rem;
  padding-left: 6.4rem;
  background-image: linear-gradient(
    to right,
    rgba($color-blue-medium, 0.3),
    rgba($color-blue-medium, 0.3) 3.2rem,
    rgba($color-blue-medium, 0.6) 3.2rem,
    rgba($color-blue-medium, 0.6) 6.4rem
  );
  background-repeat: no-repeat;
  background-size: 6.4rem 100%;
}

.events-hp__header {
  @include typeDisplay(true);
  color: $color-base-white;
  background-color: $color-blue-medium;
  padding: 2.4rem;
  min-height: 15rem;
  display: inline-block;
  text-transform: uppercase;
}

.events-hp__wrap {
  padding-top: 9.2rem;
  margin-top: -8rem;
  background: rgba($color-base-grey, 0.2);
}

.events-hp__list {
  color: $color-base-white;
  padding-left: 0;
  list-style: none;
}

.events-hp__item {
  margin-bottom: 2.4rem;
  padding-left: 1.2rem;
}

.events-hp__link {
  display: grid;
  gap: 1.6rem;

  @media (min-width: $breakpoint-tablet) {
    grid-template-columns: 22.4rem auto;
  }
}

.events-hp__date {
  @include typeDisplay(true);
  color: $color-blue-medium;
  white-space: nowrap;

  .events-hp__link:hover & {
    color: $color-blue-light;
  }

  @media (min-width: $breakpoint-tablet) {
    @include typeDisplayLarge(true);
    text-align: center;
  }
}

.events-hp__title {
  @include typeTitle(true);
  color: $color-base-white;

  .events-hp__link:hover & {
    color: $color-blue-light;
  }
}

.events-hp__actions {
  text-align: right;
}