.block-people {
  --link-bg: #000;
  --link-fg: #fff;
  --fg-headline: var(--link-fg);
  max-width: 100vw;
}
.block-people .items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (min-width: 1600px) {
  .block-people .items {
    grid-template-columns: repeat(4, 1fr);
  }
}
.block-people .link {
  position: relative;
  display: flex;
  aspect-ratio: 1/1;
  align-items: flex-end;
  text-decoration: none;
  color: var(--link-fg);
}
.block-people .link:hover .image:before, .block-people .link:focus .image:before {
  opacity: 0.25;
}
.block-people .image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--link-bg);
}
.block-people .image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
}
.block-people .image:before, .block-people .image:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.block-people .image:after {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 40%, transparent 80%);
}
.block-people .image:before {
  content: "";
  background-color: var(--brand);
  opacity: 0;
  transition: 0.5s ease all;
}
.block-people .title {
  position: relative;
  z-index: 2;
  padding: 0.5em;
}
@media screen and (max-width: 600px) {
  .block-people .title {
    padding: 0.25em;
  }
}
.block-people .name {
  text-transform: uppercase;
  font-size: clamp(12px, calc((20 / var(--page-width-unitless)) * 100vw), 20px);
}