Staggered Image Content - ViacomCBS UI Kit

PREVIEW

HTML
SCSS

<div class="staggered-image-content">
    <h2 class="component-title">Staggered Image Content</h2>
    <div class="staggered-image-content__items">
        <div class="staggered-image-content__item"><img src="/images/photos/about-the-business-1.png" alt="" class="staggered-image-content__image" /></div>
        <div class="staggered-image-content__item"><img src="/images/photos/about-the-business-2.png" alt="" class="staggered-image-content__image" /></div>
        <div class="staggered-image-content__item"><img src="/images/photos/about-the-business-3.png" alt="" class="staggered-image-content__image" /></div>
    </div>
    <div class="staggered-image-content__actions">
        <a href="#" class="btn btn-link">Check out the Brand Book&nbsp;<i class="fa fa-long-arrow-right"></i> </a>
        <a href="#" class="btn btn-link">Learn more&nbsp;<i class="fa fa-long-arrow-right"></i> </a>
    </div>
</div>

<div class="staggered-image-content">
    <h2 class="component-title">Staggered Image Content</h2>
    <div class="staggered-image-content__items">
        <div class="staggered-image-content__item"><img src="https://via.placeholder.com/480x270" alt="" class="staggered-image-content__image" /></div>
        <div class="staggered-image-content__item"><img src="https://via.placeholder.com/480x270" alt="" class="staggered-image-content__image" /></div>
        <div class="staggered-image-content__item"><img src="https://via.placeholder.com/480x270" alt="" class="staggered-image-content__image" /></div>
    </div>
    <div class="staggered-image-content__actions">
        <a href="#" class="btn btn-link">Check out the Brand Book&nbsp;<i class="fa fa-long-arrow-right"></i> </a>
        <a href="#" class="btn btn-link">Learn more&nbsp;<i class="fa fa-long-arrow-right"></i> </a>
    </div>
</div>

.staggered-image-content {
  margin-bottom: 4rem;
}

.staggered-image-content__items {
  display: flex;
  flex-direction: column;
  align-items: center;

  @media (min-width: $breakpoint-desktop) {
    align-items: flex-start;
    flex-direction: row;
  }
}

.staggered-image-content__item {
  flex: 1;
  margin-bottom: 2.4rem;

  @media (min-width: $breakpoint-desktop) {
    &:nth-child(2) {
      padding-top: 8rem;
    }
  }
}

.staggered-image-content__image {
  display: block;
  max-width: 100%;
  height: auto;
}

.staggered-image-content__actions {
  text-align: right;
}