body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.body {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  gap: 4rem;
  margin: auto;

  .body__bio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;

    .body__bio__text {
      max-width: 600px;
      align-self: flex-start;
      flex: 1;
    }

    .body__bio__image {
      flex: 1;
      width: 100%;
      max-width: 310px;
    }
  }

  .body__contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    .body__contact__list {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 1rem;
    }
  }
}

@media only screen and (min-width: 1024px) {
  .body {
    & .body__bio {
      flex-direction: row;
    }
  }
}