@media (min-width: 50em) {
  .container {
    display: flex;
    max-width: 50em;
  }

  .image-banner {
    width: 48em;
    height: auto;
    border-radius: 0.6em 0 0 0.6em;
  }

  .text-section {
    padding: 2.1em 2.5em 0 2.5em;
    /* font-size: 1.5rem; */
  }

  .text-section h1 {
    font-size: 1.35rem;
    padding-right: 0.5em;
    line-height: 1.5;
  }

  .text-section .description {
    line-height: 1.7;
    padding-bottom: 2.1em;
    padding-right: 0.9em;
  }

  .author {
    padding: 0 2em 2em 2em;
    position: relative;
  }

  .container {
    position: static;
  }

  .tooltip .content {
    margin-left: -0.5em;
  }

  .tooltip {
    position: absolute;
    transform: translate(8.5em, -1.5em);
    border-radius: 0.6em;
    padding: 1em 2.5em;
    width: 15.5em;
    box-shadow: 0 0 0.7em var(--grayish-blue);
  }

  .tooltip::after {
    content: "";
    position: absolute;
    border-width: 0.8em;
    border-style: solid;
    top: 50%;
    margin-top: -0.75em;
    left: 102%;
    margin-left: -0.4em;
    border-color: transparent transparent transparent
      var(--Very-dark-grayish-blue);
  }
}

@media (min-width: 60em) {
  .tooltip {
    transform: translate(18.3em, -6em);
  }

  .tooltip::after {
    top: 100%;
    left: 50%;
    margin-top: 0;
    margin-left: -0.4em;
    border-color: var(--Very-dark-grayish-blue) transparent transparent
      transparent;
  }
}

@media (max-width: 21.25em) {
  .author .share-img-btn {
    translate: 1.4em;
  }
  .author .share-img-btn.active {
    translate: 1.4em;
  }
}

/* transform: translate(18.3em, -6em); */