.profile-pic-icon {
  width: 88px;
  height: 88px;
  position: relative;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}

.description,
.title {
  align-self: stretch;
  position: relative;
  line-height: 150%;
}

.title {
  margin: 0;
  font-size: inherit;
  font-weight: 600;
  font-family: inherit;
}

.description {
  font-size: var(--text-preset-2-bold-size);
  color: var(--color-green);
}

.name-location {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-50);
}

.bio,
.placeholder {
  position: relative;
  font-size: var(--text-preset-2-bold-size);
  line-height: 150%;
}

.bio {
  margin: 0;
  align-self: stretch;
  color: var(--color-white);
}

.placeholder {
  display: inline-block;
  font-family: var(--text-preset-2-bold);
  color: var(--color-white);
  text-align: left;
  min-width: 49px;
}

.button {
  cursor: pointer;
  border: 0;
  padding: var(--spacing-150) var(--padding-xl);
  background-color: var(--color-grey-700);
  align-self: stretch;
  border-radius: var(--br-5xs);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.button1:hover,
.button2:hover,
.button3:hover,
.button4:hover,
.button:hover {
  background-color: var(--color-dimgray);
  color: var(--color-green);
}

.fab:hover {
  color: var(--color-grey-900);
  border: 1px solid var(--color-grey-900);
  border-radius: 50%;
}

.placeholder1 {
  position: relative;
  font-size: var(--text-preset-2-bold-size);
  line-height: 150%;
  display: inline-block;
  font-family: var(--text-preset-2-bold);
  color: var(--color-white);
  text-align: left;
  min-width: 115px;
}

.button1 {
  cursor: pointer;
  border: 0;
  padding: var(--spacing-150) var(--padding-xl);
  background-color: var(--color-grey-700);
  align-self: stretch;
  border-radius: var(--br-5xs);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.placeholder2 {
  position: relative;
  font-size: var(--text-preset-2-bold-size);
  line-height: 150%;
  display: inline-block;
  font-family: var(--text-preset-2-bold);
  color: var(--color-white);
  text-align: left;
  min-width: 59px;
}

.button2 {
  cursor: pointer;
  border: 0;
  padding: var(--spacing-150) var(--padding-xl);
  background-color: var(--color-grey-700);
  align-self: stretch;
  border-radius: var(--br-5xs);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.placeholder3 {
  position: relative;
  font-size: var(--text-preset-2-bold-size);
  line-height: 150%;
  display: inline-block;
  font-family: var(--text-preset-2-bold);
  color: var(--color-white);
  text-align: left;
  min-width: 50px;
}

.button3 {
  cursor: pointer;
  border: 0;
  padding: var(--spacing-150) var(--padding-xl);
  background-color: var(--color-grey-700);
  align-self: stretch;
  border-radius: var(--br-5xs);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.placeholder4 {
  position: relative;
  font-size: var(--text-preset-2-bold-size);
  line-height: 150%;
  display: inline-block;
  font-family: var(--text-preset-2-bold);
  color: var(--color-white);
  text-align: left;
  min-width: 70px;
}

.button4 {
  cursor: pointer;
  border: 0;
  padding: var(--spacing-150) var(--padding-xl);
  background-color: var(--color-grey-700);
  align-self: stretch;
  border-radius: var(--br-5xs);
  flex-direction: row;
  justify-content: center;
}

.placeholder5 {
  position: relative;
  font-size: var(--text-preset-2-bold-size);
  line-height: 150%;
  display: inline-block;
  font-family: var(--text-preset-2-bold);
  color: var(--color-white);
  text-align: left;
  min-width: 59px;
}

.button4,
.card,
.desktop,
.links {
  display: flex;
  align-items: center;
}

.links {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--spacing-200);
}

.card,
.desktop {
  box-sizing: border-box;
}

.card {
  width: 384px;
  border-radius: 12px;
  background-color: var(--color-grey-800);
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--spacing-500);
  gap: var(--spacing-300);
  max-width: 384px;
}

.desktop {
  width: 100%;
  height: 960px;
  position: relative;
  background-color: var(--color-grey-900);
  overflow: hidden;
  flex-direction: row;
  justify-content: center;
  padding: 174.5px var(--padding-xl);
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  font-size: var(--text-preset-1-size);
  color: var(--color-white);
  font-family: var(--text-preset-2-bold);
}

@media screen and (max-width: 600px) {
  .card {
    padding-top: var(--spacing-500);
    padding-bottom: var(--spacing-500);
    box-sizing: border-box;
  }
}

@media screen and (max-width: 450px) {
  .title {
    font-size: 19px;
    line-height: 29px;
  }

  .card {
    max-width: 100%;
  }
}