Responsive buttons inside a div

It has an image and inside that image, I put a div with some buttons.

My problem is these buttons are not responsive.

Already tried everything, but by reducing the screen, the buttons beginning to come out of the image :(

Does anyone know why and how to solve?

Thanks!

Html

<div class="mdc-image-list--with-text-protection">
          <div class="mdc-image-list__supporting">           
            <span class="mdc-image-list__label ImageButtonsG divB{{i}}">
              <a><img src="./assets/pin.svg" class="Pin"></a>
              <a><img src="./assets/inboxpic.svg" class="Inbox"></a>
              <a><img src="./assets/chat.svg" class="Chat"></a>
              <a><img src="./assets/taskblue.svg" class="Task"></a>
            </span>
          </div>
        </div>

CSS

.mdc-image-list__supporting{
  background: #60606045 !important;
}

.masonry-image-list{
  margin-right: 6px !important;
  margin-left: 11px !important;
  border-radius: 8px !important;
}

.ImageButtonsG{
  background-color: white;
  display: none;
  border-radius: 8px 8px 0px 0px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  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;
}