.section > .content.employee,
.section > .container > .content.employee {
  display: grid !important;
  grid-template-columns: 384px minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: 0;
  width: 100%;
  padding: 0;
  overflow: visible;
  justify-content: stretch;
  align-items: stretch;
  --border-radius: 20px;
  border-radius: var(--border-radius);
}

.section > .content.employee > *,
.section > .container > .content.employee > * {
  border-radius: 0;
}

.section > .content.employee > .photo,
.section > .container > .content.employee > .photo {
  --height: 512px;
  height: var(--height);
  width: auto;
  aspect-ratio: 3 / 4;
  overflow: visible;
  background: rgb(var(--color-bg-light));
  padding: var(--spacing-level-4);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  flex-shrink: 0;
  order: -1;
  border-radius: var(--border-radius) 0 0 0;
}

.section
  > .content.employee
  > .photo:not(.section .content.employee > .contacts ~ .photo),
.section
  > .container
  > .content.employee
  > .photo:not(.section .content.employee > .contacts ~ .photo) {
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.section > .content.employee > .photo > img,
.section > .container > .content.employee > .photo > img {
  height: 100%;
  width: 100%;
  border-radius: calc(var(--border-radius) - var(--spacing-level-4));
  object-fit: cover;
  filter: brightness(1.05) contrast(105%);
}

.section > .content.employee > .photo > .poster,
.section > .container > .content.employee > .photo > .poster {
  height: 100%;
  width: 100%;
  border-radius: calc(var(--border-radius) - var(--spacing-level-4));
  background: rgb(var(--color-accent-dark));
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.section > .content.employee > .photo > .poster > svg,
.section > .container > .content.employee > .photo > .poster > svg {
  height: 40px;
  width: 40px;
}

.section > .content.employee > .photo > .poster > svg > *,
.section > .container > .content.employee > .photo > .poster > svg > * {
  fill: rgb(var(--color-text-dark));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: rgb(var(--color-text-dark));
  stroke-width: 0;
  transition: fill 0.3s;
}

.section > .content.employee > .employee-card,
.section > .container > .content.employee > .employee-card {
  height: auto;
  width: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: stretch;
  align-items: stretch;
  gap: var(--spacing-level-3);
  padding: var(--spacing-level-1);
  background: rgb(var(--color-bg-light));
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  max-height: 512px;
  overflow: auto;
}

.section > .content.employee > .employee-card > .title,
.section > .container > .content.employee > .employee-card > .title {
  font-family: "Montserrat";
  font-size: var(--text-size-header-large);
  font-weight: 700;
}

.section > .content.employee > .employee-card > .positions,
.section > .container > .content.employee > .employee-card > .positions {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-level-4);
  font-size: var(--text-size-text-large);
  font-weight: 400;
}

.section > .content.employee > .employee-card > .positions > a::after,
.section
  > .container
  > .content.employee
  > .employee-card
  > .positions
  > a::after {
  display: inline-block;
  content: "→";
  background-position: center;
  background-repeat: no-repeat;
  margin-left: var(--spacing-level-5);
}

.section > .content > .contacts,
.section > .container > .content > .contacts {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: var(--text-size-text-large);
  font-weight: 400;
  padding: var(--spacing-level-1);
  gap: var(--spacing-level-4);
  align-self: baseline;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  background: rgb(var(--color-bg-light));
}

.section > .content > .contacts > *,
.section > .container > .content > .contacts > * {
  margin: 0 !important;
}

.section > .content > .about,
.section > .container > .content > .about {
  font-size: var(--text-size-text-large);
  padding: var(--spacing-level-1);
  background: rgb(var(--color-bg-white));
  border-radius: var(--border-radius) 0 0 0;
  overflow: visible;
  font-weight: 400;
}

.section > .content > .contacts ~ .about::after,
.section > .container > .content > .contacts ~ .about::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: var(--border-radius);
  width: var(--border-radius);
  background: rgb(var(--color-bg-light));
  z-index: -1;
}

@media (max-width: 950px) {
  .section > .content.employee,
  .section > .container > .content.employee {
    grid-template-columns: minmax(0, 1fr);
  }

  .section.employee {
    padding-left: 0;
    padding-right: 0;
  }

  .section > .content.employee *:not(.swiper *):not([class*="button-"]),
  .section
    > .container
    > .content.employee
    *:not(.swiper *):not([class*="button-"]) {
    border-radius: 0 !important;
  }

  .section > .content.employee .contacts,
  .section > .content.employee .employee-card,
  .section > .container > .content.employee .contacts,
  .section > .container > .content.employee .employee-card {
    border-radius: 0 0 20px 20px !important;
  }

  .section > .content.employee .contacts,
  .section > .container > .content.employee .contacts {
    overflow: visible;
  }

  .section > .content.employee .contacts::before,
  .section > .container > .content.employee .contacts::before {
    content: "";
    height: 20px;
    width: 100%;
    background: rgb(var(--color-bg-light));
    position: absolute;
    top: -20px;
    left: 0;
  }

  .section > .content.employee .contacts::after,
  .section > .container > .content.employee .contacts::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: var(--spacing-level-1);
    right: var(--spacing-level-1);
    width: calc(100% - var(--spacing-level-1) * 2);
    height: 1px;
    background: rgb(var(--color-bg-dark), 0.1);
  }

  .section > .content.employee > .photo,
  .section > .container > .content.employee > .photo {
    height: auto;
    width: auto;
    aspect-ratio: 1;
    padding: 0;
  }

  .section > .content.employee .about.empty,
  .section > .container > .content.employee .about.empty {
    display: none;
  }
}