@import '../../theme/theme';

.heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: $section-gap / 2 0;
}

.info {
  margin-left: map-get($spacers, x-large);
}

.nameAndUsername {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  line-height: $heading-line-height;
}

.name {
  margin: 0;
  color: $black-color;
  font-size: map-get($heading-sizes, h1);
  font-weight: 600;
}

.username {
  margin-left: map-get($spacers, x-small);
  color: $body-color;
  font-size: map-get($heading-sizes, h1) * 0.8;
  font-weight: 400;
}

.bio {
  margin: 0;
  color: $body-color;
  font-size: map-get($font-sizes, large);
}

@media only screen and (max-width: px-to-rem(1000px)) {
  .heading {
    flex-direction: column;
    padding: $section-gap / 2.5 0;
    text-align: center;
  }

  .info {
    margin-top: map-get($spacers, normal);
    margin-left: 0;
  }

  .nameAndUsername {
    flex-direction: column;
    align-items: center;
  }

  .username {
    margin-bottom: map-get($spacers, small);
    margin-left: 0;
  }
}
