chrome inspector and hover not detecting child element

As you can see on the example, when I try to hover the buttons, it does nothing. Also, i tried to right-click the buttons and go to "inspect element" to see what was the problem, but the chrome inspector selects the parent element. I tried to change the z-index of all the elements, and give them all the position absolute or relative (because i know z-index has problems with position static).

note: The elements with position absolute have to have position absolute

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  background: rgb(63, 66, 175);
  background: linear-gradient(305deg, rgba(63, 66, 175, 1) 0%, rgba(99, 145, 204, 1) 47%, rgba(139, 216, 236, 1) 100%);
}

:root {
  --d_blue: rgb(91, 84, 190);
  --l_blue: rgb(169, 165, 232);
  --minw: 350px;
  --maxw: 450px;
  --medw: 30%;
  --i: 0;
}

@media (pointer:none),
(pointer:coarse) {
   :root {
    --medw: 100%;
  }
}

.layout {
  z-index: 1;
  position: relative;
  display: block;
  width: var(--medw);
  min-width: var(--minw);
  max-width: var(--maxw);
  height: 100%;
  margin: auto;
  box-shadow: 0px 0px 5px #000, 0px 0px 15px #858585;
}

.presentation-img {
  z-index: 2;
  display: block;
  width: calc(var(--medw));
  min-width: var(--minw);
  max-width: var(--maxw);
  height: 100%;
  background: white;
  border-radius: 20px;
  position: absolute;
  transform: translate(0px, calc(var(--i)*-100%));
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0, 0, .41, 1);
}

.presentation-img #image img {
  z-index: 3;
  position: relative;
  height: 80%;
  width: 95%;
  margin: 15% 0% 0% 0%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding: 0% 0% 0% 0%;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

#image {
  width: 100%;
  height: 100%;
}

.btn {
  z-index: 4;
  position: absolute;
  width: 100%;
  top: 87%;
  display: inline-flex;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
}

.btn div {
  z-index: 5;
  position: relative;
  width: 50px;
  height: 50px;
  padding: 15px 15px 15px 15px;
}

.btn div:first-child {
  margin: 0% 0% 0% 7%;
}

.btn div:first-child:hover {
  background: rgb(210, 210, 210);
}

.btn div:last-child {
  margin: 0% 7% 0% 0%;
}

.profile,
.buy-votes {
  z-index: 999999;
  position: relative;
  display: block;
  background: white;
  border-radius: 50%;
  box-shadow: 0px 0px 11px #858585;
  align-items: center;
  text-align: center;
}

.profile:hover,
.buy-votes:hover {
  background-color: rgb(214, 214, 214);
}

.profile i,
.buy-votes i {
  margin: auto;
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <title>site</title>
</head>

<body>
  <div class="layout" id="container">
    <div class="presentation-img" id="pres">
      <div id="image">
        <img draggable="false" touch-action="none" src="https://images.wallpapersden.com/image/download/forests-beautiful-landscape_a2duaWyUmZqaraWkpJRpbWWta2ll.jpg">
      </div>
      <div class="btn">
        <div onclick="console.log('test');" class="profile">
          <i class="fa-solid fa-user"></i>
        </div>
        <div onclick="console.log('test');" class="buy-votes">
          <i class="fa-solid fa-cart-shopping"></i>
        </div>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

note: the stackoverflow snipet is a bit flat

if you do not understant the stack overflow, I have it too in jsfiddle

any doubt, just ask, and please help me

Solution

I discovered, I added pointer-events: none to the parent