.teamContainer h2 {
   margin-bottom: var(--spacing-grid);
   display: flex;
   align-items: center;
   gap: var(--spacing-grid);
}

.teamCounter {
   position: relative;
   display: inline-block;
   background: var(--color-primary);
   font-size: 1rem;
   line-height: 1rem;
   color: rgba(0,0,0,.4);
   padding: .5rem 1rem;
   border-radius: calc(var(--border-radius)/2);
}
.teamCounter::before {
   content: "";
   width: .5rem;
   height: .5rem;
   background: var(--color-primary);
   transform: rotate(45deg);
   position: absolute;
   left: -.25rem;
   top: calc(50% - .25rem);
}

.team {
   display: grid;
   gap: var(--spacing-grid);
   margin-bottom: var(--spacing-l);
}
.team__member {
   display: flex;
   align-items: center;
   background: var(--color-bg-500);
   border-radius: var(--border-radius);
   border: var(--border);
   padding: var(--spacing-s);
}
.team__member--noimg {
   padding: var(--spacing-s) 0;
}
.team__member img.team__member_image {
   display: block;
   width: 3.5rem;
   height: 3.5rem;
   object-fit: cover;
   border-radius: var(--border-radius);
}
.team__member .team__member_name {
   display: inline-block;
   font-size: 1rem;
   background: var(--color-bg-900);
   padding: .5rem var(--spacing-s);
   border-radius: 2rem;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}
.team__member .team__member_rank {
   padding-left: var(--spacing-s);
}
.team__member--noimg .team__member_name,
.team__member--noimg .team__member_rank {
   padding-left: var(--spacing-m);
}
@media only screen and (min-width: 800px) {
   .team {
      grid-template-columns: repeat(2, 1fr);
   }
}
@media only screen and (min-width: 1200px) {
   .team {
      grid-template-columns: repeat(3, 1fr);
   }
}