Responsive div buttons inside Image

I have a gallery of masonry images and I want to place on each image a div with buttons.

My problem is that the div is not responsive and when I reduce the screen some buttons disappear rather than slow down and follow the movement of the screen.

I intend that by decreasing the screen the buttons will decrease and still appear all within the div.

Image with the problem:

My code ---> Stackblitz

HTML

<ul class="mdc-image-list mdc-image-list--masonry masonry-image-list second">
      <li class="mdc-image-list__item" *ngFor="let image of list; let  i = index;">
          <img [src]="image" class="mdc-image-list__image">
        <div class="mdc-image-list--with-text-protection">
          <div class="mdc-image-list__supporting">
            <span class="mdc-image-list__label ImageButtonsG">
              <a><img src="https://svgshare.com/i/GyS.svg" class="Pin"></a>
              <a><img src="https://svgshare.com/i/Gws.svg" class="Inbox"></a>
              <a><img src="https://svgshare.com/i/GxZ.svg" class="Chat"></a>
              <a><img src="https://svgshare.com/i/Gy5.svg" class="Task"></a>
            </span>
          </div>
        </div>
      </li>
    </ul>

CSS

.ImageButtonsG{
  background-color: white;
  border-radius: 8px 8px 0px 0px;
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 90%;
  height: 48px;
}


.Pin{
  float: left;
  margin-top: 8px;
  margin-left: 5%;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.Inbox{
  margin-left: 17%;
  width: 30px;
  height: 30px;
  margin-top: 8px;
  cursor: pointer;
}

.Chat{
  margin-left: 17%;
  width: 30px;
  margin-top: 10px;
  height: 27px;
  cursor: pointer;
}

.Task{
  width: 30px;
  margin-left: 17%;
  height: 30px;
  cursor: pointer;
  margin-top: 8px;
}

Can anyone help me overcome the problem?

Thanks!