/**********************************************************
  CSS for this block. Classes on block elements and the 
  selectors that target them should be designed so they 
  will only affect the contents of the block.
**********************************************************/
.block.--bg-black .people-list {
  color: white;
}

.block.--bg-black .people-list .pl-cards .pl-card {
  background-color: black;
}

.block.--bg-black .people-list .pl-cards .pl-card .pl-details {
  background-color: white;
}

.block.--bg-black .people-list .pl-cards .pl-card .pl-details .pl-name,
.block.--bg-black .people-list .pl-cards .pl-card .pl-details .pl-job-title {
  color: black;
}

.block .people-list.pl-simple-cards {
  padding: 1.5rem;
}

.block .people-list.pl-simple-cards .pl-cards {
  display: flex;
  flex-flow: column nowrap;
  gap: 2rem;
  justify-content: flex-start;
  align-items: center;
  padding: 2rem 0;
}

.block .people-list .pl-cards .pl-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  text-decoration: none;
  position: relative;
  max-width: 350px;
  width: 100%;
}

.block .people-list.pl-simple-cards .pl-cards .pl-card:after {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  bottom: 0;
  position: absolute;
  transform: scaleX(0);
  transition: all 0.25s cubic-bezier(1, 0.25, 0, 0.75) 0s;
  background-color: var(--boiler-gold);
}

.block .people-list.pl-simple-cards .pl-cards .pl-card:hover:after {
  transform: scaleX(1);
}

.block .people-list.pl-simple-cards .pl-cards .pl-card .pl-image img {
  width: 100%;
  border-radius: 4px 4px 0 0;
  aspect-ratio: 7 / 8;
  object-fit: cover;
  object-position: top center;
}

.block .people-list.pl-simple-cards .pl-cards .pl-card .pl-image svg {
  color: #c0c1c5;
  background-color: #dddee0;
  width: calc(100% - 4rem);
  height: calc(348px - 4rem);
  padding: 2rem;
  border-radius: 4px 4px 0 0;
  object-fit: cover;
  object-position: top left;
  margin-bottom: -5px;
}

.block .people-list .pl-cards .pl-card .pl-details {
  flex-grow: 1;
  padding: 2rem;
  background-color: black;
  border-radius: 0 0 4px 4px; /* Adjusted to match the card */
}

.block .people-list .pl-cards .pl-card .pl-details .pl-name {
  color: white;
  font-family: var(--acumin-pro);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}

.block .people-list .pl-cards .pl-card .pl-details .pl-job-title {
  color: var(--dust);
  font-family: var(--acumin-pro);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

@media screen and (min-width: 576px) {
  .block .people-list.pl-simple-cards .pl-cards {
  }

  .block .people-list.pl-simple-cards .pl-cards .pl-card {
  }
}

@media screen and (min-width: 768px) {
  .block .people-list.pl-simple-cards .pl-cards {
    flex-flow: row wrap;
    align-items: stretch;
  }

  .block .people-list.pl-simple-cards .pl-cards .pl-card {
    width: calc(50% - 1rem);
  }
}

@media screen and (min-width: 992px) {
  .block .people-list.pl-simple-cards .pl-cards .pl-card {
    width: calc(33% - 1.5rem);
  }
}

@media screen and (min-width: 1200px) {
  .block .people-list.pl-simple-cards .pl-cards .pl-card {
    width: calc(25% - 1.5rem);
  }
}