/* ----- Mixins ----- */
@keyframes line-animation {
  0% {
    background-position: 100% var(--line-position);
    background-size: 100% var(--line-height);
  }
  35% {
    background-position: 100% var(--line-position);
    background-size: 0 var(--line-height);
  }
  36% {
    background-position: 0 var(--line-position);
    background-size: 0 var(--line-height);
  }
  100% {
    background-position: 0 var(--line-position);
    background-size: 100% var(--line-height);
  }
}
.employees {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.employees__item {
  z-index: 2;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 3/4;
  color: var(--color-white);
  padding: clamp(10px, 6cqw, 30px);
  container-type: inline-size;
  flex-basis: calc(33.33% - 20px);
  height: clamp(200px, 75vh, 800px);
}
.employees__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.6) 100%);
  z-index: 1;
}
.employees__item-inner {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
}
.employees__image {
  z-index: -1;
}
.employees__left {
  z-index: 2;
  flex-grow: 1;
}
.employees__name {
  font-family: "Lora", serif;
  font-weight: var(--regular);
  font-style: normal;
  font-optical-sizing: auto;
  letter-spacing: var(--letter-spacing);
  letter-spacing: 0;
  font-size: var(--font-size-24);
}
.employees__position {
  font-size: var(--font-size-14);
  margin-top: 1em;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-bigger);
}
.employees__right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5em;
  z-index: 3;
}
.employees__icon-inner:hover {
  background-color: var(--color-secondary);
}
.employees__icon:hover .employees__icon-value {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translate(-2.5em, -50%);
}
.employees__icon-inner {
  width: 1.25em;
  height: 1.25em;
  mask: var(--icon) center / contain no-repeat;
  background-color: var(--color-white);
  transition: var(--transition);
}
.employees__icon-inner--phone {
  --icon: var(--icon-phone);
}
.employees__icon-inner--email {
  --icon: var(--icon-email);
}
.employees__icon-value {
  font-size: var(--font-size-14);
  color: var(--color-white);
  position: absolute;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  right: 0;
  white-space: nowrap;
  top: 50%;
  transform: translate(-1em, -50%);
  transition: var(--transition);
}
@media (max-width: 480px) {
  .employees__item {
    height: auto;
    width: 100%;
    flex-basis: 100%;
  }
}
@container (max-width: 440px) {
  .employees__icon-value {
    display: none !important;
  }
}