/* --------------------------------- *\

	Team

\* --------------------------------- */
.cols--pmtm {
  --team-size-var: 1;
}
.cols--pmtm-3 {
  --team-size-var: 1.25;
}

.team {
  position: relative;
  padding-top: 100%;
  overflow: hidden;
}
.team__image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-gray);
}
.team__image > img {
  filter: grayscale(0.5);
}
.team__content {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateY(calc(100% - 4rem * var(--team-size-var)));
  left: 0;
  top: 0;
  color: var(--color-white);
  padding: calc(1rem * var(--team-size-var)) calc(1.5rem * var(--team-size-var));
  transition: transform 0.5s ease-in-out;
}
.team__content:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.75;
  background-color: var(--color-gray-dark);
  background-color: var(--color-black);
}
.team__name {
  font-size: calc(1.15rem * var(--team-size-var));
  line-height: 1.65em;
  font-weight: 900;
  color: var(--color-white);
  position: relative;
}
.team__position, .team__icon {
  font-size: calc(1rem * var(--team-size-var));
  margin-top: calc(2rem * var(--team-size-var));
  line-height: 1.65em;
  color: var(--color-white);
  position: relative;
}
.team__icon {
  margin-top: calc(1rem * var(--team-size-var));
  display: flex;
  align-items: center;
}
.team__icon > svg {
  width: calc(2rem * var(--team-size-var));
  height: calc(2rem * var(--team-size-var));
  fill: var(--color-main);
  margin-right: calc(0.75rem * var(--team-size-var));
}
.team__arrow {
  width: calc(1.5rem * var(--team-size-var));
  height: calc(1.5rem * var(--team-size-var));
  position: absolute;
  bottom: calc(1.35rem * var(--team-size-var));
  right: calc(1.35rem * var(--team-size-var));
  fill: var(--color-main);
  transition: transform 0.5s ease-in-out;
}
.team__toggle {
  display: none;
}

@media (pointer: fine) {
  .team:hover .team__content {
    transform: translateY(0);
  }
  .team:hover .team__arrow {
    transform: rotate(540deg);
  }
}
@media (pointer: coarse) {
  .team__toggle {
    display: block;
    position: absolute;
    width: 100%;
    height: calc(4rem * var(--team-size-var));
    top: 0;
    left: 0;
    z-index: 20;
  }
  .team .team__content--show {
    transform: translateY(0);
  }
  .team .team__content--show ~ .team__arrow {
    transform: rotate(540deg);
  }
  .team .team__content--show .team__toggle {
    top: auto;
    bottom: 0;
  }
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 567px) {
  .cols--pmtm {
    --team-size-var: 1.35;
  }
  .cols--pmtm-3 {
    --team-size-var: 1.35;
  }
}

/*# sourceMappingURL=--9-2-team.css.map */