<div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
  <div class="card flex flex-col">
    <div class="h-32 bg-brands-facebook"></div>
    <div class="card__body p-2 flex">
      <p class="font-bold flex-grow">Facebook</p>
      <p>#067ceb</p>
    </div>
  </div>
  <div class="card flex flex-col">
    <div class="h-32 bg-brands-twitter"></div>
    <div class="card__body p-2 flex">
      <p class="font-bold flex-grow">Twitter</p>
      <p>#00c9ff</p>
    </div>
  </div>
  <div class="card flex flex-col">
    <div class="h-32 bg-brands-gmail"></div>
    <div class="card__body p-2 flex">
      <p class="font-bold flex-grow">Gmail</p>
      <p>#ec230e</p>
    </div>
  </div>
  <div class="card flex flex-col">
    <div class="h-32 bg-brands-linkedin"></div>
    <div class="card__body p-2 flex">
      <p class="font-bold flex-grow">LinkedIn</p>
      <p>#0066a9</p>
    </div>
  </div>
</div>
