Creator Box

<div class="friends">
<div class="creators-info">
  <div class="scroll-grid">
    <a href="link" class="creator-item">
      <div class="img-wrapper">
        <img src= "IMGLINK" alt="Creator 1">
      </div>
    </a>
    <a href="link" class="creator-item">
      <div class="img-wrapper">
        <img src= "IMGLINK" alt="Creator 1">
      </div>
    </a>
    <a href="link" class="creator-item">
      <div class="img-wrapper">
        <img src= "IMGLINK" alt="Creator 1">
      </div>
    </a>
   <a href="link" class="creator-item">
      <div class="img-wrapper">
        <img src= "IMGLINK" alt="Creator 1">
      </div>
    </a>
    <a href="link" class="creator-item">
      <div class="img-wrapper">
        <img src= "IMGLINK" alt="Creator 1">
      </div>
    </a>
    <a href="link" class="creator-item">
      <div class="img-wrapper">
        <img src= "IMGLINK" alt="Creator 1">
      </div>
    </a>
    <a href="link" class="creator-item">
      <div class="img-wrapper">
        <img src= "IMGLINK" alt="Creator 1">
      </div>
    </a>
    <a href="link" class="creator-item">
      <div class="img-wrapper">
        <img src= "IMGLINK" alt="Creator 1">
      </div>
    </a>
    <a href="link" class="creator-item">
      <div class="img-wrapper">
        <img src= "IMGLINK" alt="Creator 1">
      </div>
    </a>

  </div>
</div>
</div>

<style>
.creators-info {
  width: 100%;
  max-width: 1000px;
  height: 120px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #212121;
  border: 2px solid #ffffff;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;

}

.scroll-grid {
  display: grid;
  grid-template-rows: repeat(1, 100px);
  grid-auto-flow: column;
  gap: 5px;
}

.creator-item {
  position: relative;
  width: 90px;
  height: 90px;
  flex: 0 0 auto;
  text-decoration: none;
}

.img-wrapper {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #5084b4;
  cursor: pointer;  transition: transform 0.3s ease;

}

.img-wrapper:hover {
  transform: scale(1.05);
}

.creators-info::-webkit-scrollbar {
  height: 6px;
}

.creators-info::-webkit-scrollbar-thumb {
  background: #95c6f4;
  border-radius: 3px;
}

.creators-info::-webkit-scrollbar-track {
  background: #bcf5c310;
}
</style>