.team-profile {
  container: team-profile / inline-size
}

.team-profile__image {
  max-width: 360px;
  width: 100%
}

.team-profile__info {
  display: grid;
  grid-template-areas: "position action" "contacts action" "socials action";
  grid-template-rows: auto 1fr auto;
  gap: clamp(24px, 3cqw, 28px);
  width: 100%;
}

.team-profile__position {
  grid-area: position
}

.team-profile__contacts {
  grid-area: contacts
}


.team-profile__call-to-action {
  grid-area: action;
  justify-self: end
}

@container team-profile (width < 600px) {
  .team-profile__body {
    flex-direction: column
  }

  .team-profile__info {
    padding-inline: 0
  }
}

@container team-profile (width < 500px) {
  .team-profile__info {
    grid-template-areas: "position" "contacts" "socials" "action"
  }

  .team-profile__call-to-action {
    justify-self: start
  }
}