@use 'sprucecss/scss/spruce' as *;

.team-block {
  padding-block: spacer-clamp('xl', 'xxl');

  &__inner {
    display: flex;
    flex-direction: column;
    gap: spacer('l');
  }

  &__grid {
    @include clear-list;
    @include layout-grid('m', 14rem);

    // The items sit side by side: clear the stack margins of the base list style.
    > li {
      margin-block: 0;
      padding-block: 0;
    }
  }

  &__member {
    background-color: color('surface');
    border: config('border-width-base', $display) solid color('border');
    border-radius: radius('lg');
    display: flex;
    flex-direction: column;
    overflow: hidden;

    &--hiring {
      background-color: color('surface-muted');
      border-style: dashed;
      justify-content: center;
    }
  }

  &__photo {
    aspect-ratio: 6 / 7;
    inline-size: 100%;
    object-fit: cover;
  }

  &__body {
    padding: spacer('m');
    @include layout-stack('xxs');

    .badge,
    .btn {
      justify-self: start;
    }

    .btn {
      margin-block-start: spacer('s') !important;
    }
  }

  &__name {
    font-size: font-size('h5');
  }

  &__role {
    color: color('primary');
    font-size: config('font-size-sm', $typography);
    font-weight: 600;
  }

  &__bio {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
  }
}

<section class="team-block" aria-labelledby="team-title">
    <div class="container">
        <div class="team-block__inner">
            <header class="block-heading">
                <p class="block-heading__eyebrow">Our team</p>
                <h2 class="block-heading__title" id="team-title">The people behind the product</h2>
                <p class="block-heading__text">A small, remote team of designers and engineers.</p>
            </header>
            <ul class="team-block__grid" role="list">
                <li class="team-block__member">
                    <img class="team-block__photo" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&amp;fit=crop&amp;w=480&amp;h=560&amp;q=70" alt="" width="480" height="560" loading="lazy">
                    <div class="team-block__body">
                        <h3 class="team-block__name">Maya Chen</h3>
                        <p class="team-block__role">Design Lead</p>
                        <p class="team-block__bio">Designs calm interfaces and accessible color systems.</p>
                    </div>
                </li>
                <li class="team-block__member">
                    <img class="team-block__photo" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&amp;fit=crop&amp;w=480&amp;h=560&amp;q=70" alt="" width="480" height="560" loading="lazy">
                    <div class="team-block__body">
                        <h3 class="team-block__name">Daniel Okafor</h3>
                        <p class="team-block__role">Frontend Engineer</p>
                        <p class="team-block__bio">Writes Sass and CSS that ages gracefully.</p>
                    </div>
                </li>
                <li class="team-block__member">
                    <img class="team-block__photo" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&amp;fit=crop&amp;w=480&amp;h=560&amp;q=70" alt="" width="480" height="560" loading="lazy">
                    <div class="team-block__body">
                        <h3 class="team-block__name">Ava Martinez</h3>
                        <p class="team-block__role">Product Manager</p>
                        <p class="team-block__bio">Turns feedback into roadmaps and releases.</p>
                    </div>
                </li>
                <li class="team-block__member team-block__member--hiring">
                    <div class="team-block__body">
                        <span class="badge badge--success"><span class="badge__dot" aria-hidden="true"></span>We’re hiring</span>
                        <h3 class="team-block__name">Join the team</h3>
                        <p class="team-block__bio">We’re looking for a developer advocate who loves CSS.</p>
                        <a class="btn btn--outline-primary btn--sm" href="#">See open roles</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</section>