.bio-description {
  display: block;
  padding: var(--PT) 0 var(--PB);

  .bio-description__container {
    display: grid;
    gap: 7rem;
    grid-template-columns: 7rem 1fr;

    .bio-description__name {
      position: relative;

      .bio-description__title {
        font-size: var(--title-size);
        font-style: italic;
        font-weight: 300;
        line-height: 1.11;
        position: absolute;
        right: 0;
        rotate: -90deg;
        text-align: right;
        top: 0.25em;
        transform-origin: right bottom;
        translate: 0 -100%;
        white-space: nowrap;
      }
    }

    .bio-description__content {
      font-size: var(--description-size);
      font-weight: 400;
      line-height: 1.45;
    }
  }

  @media (width <=1024px) {
    .bio-description__container {
      gap: 1.5rem;
      grid-template-columns: 4.5rem 1fr;
    }
  }
}