//HTML
<ul className='card'>
   <li>
    <img src={avatar_url} alt={login} />
      <div>
      <h4>{login}</h4>
 		<a href={html_url}>profile</a>
 	 </div>
  </li>
</ul>


.card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 3rem auto;
}

.card li {
  width: 100%;
  display: flex;
  align-items: center;
  background: var(--clr-white);
  padding: 1rem 2rem;
  border-radius: var(--radius);
  text-align: left;
}