.author-hero {
  display: grid;
  grid-template-areas:
    'heading'
    'image'
    'description';
  gap: 1rem;
  padding: 1.5rem 1rem;
  text-align: center;

  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.author-hero__heading {
  grid-area: heading;
}

.author-hero__title {
  font-size: var(--text-5xl);
  color: var(--color-text);
}

.author-hero__count {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-gris);
}

.author-hero__image {
  grid-area: image;

  display: flex;
  justify-content: center;
}

.author-hero__avatar {
  width: 300px;
  aspect-ratio: var(--ratio-square);
  display: block;
  object-fit: cover;
  border-radius: var(--image-author-radius);
}

.author-hero__description {
  grid-area: description;

  max-width: 60ch;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .author-hero {
    grid-template-columns: 250px minmax(0, 650px);
    grid-template-areas:
      'image heading'
      'image description';

    justify-content: center;
    align-items: center;

    max-width: 1000px;
    margin-inline: auto;

    column-gap: 3rem;
    row-gap: 0.75rem;
  }

  .author-hero__avatar {
    width: 250px;
  }

  .author-hero__heading {
    align-self: end;
  }

  .author-hero__description {
    align-self: start;
    margin-inline: 0;
  }
}