title: I cannot open the description window
body: <p>To help you understand the problem.</p>
  <p>I will attach a sandbox with the code.
  The description window cannot be opened. It is necessary that when you click on the picture a window with a description opens, and when you click on the cross, it closes. However, this doesn't work.
  I do not understand what the problem is.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const handleClick = event =&gt; {
    const target = event.target;
    if (target.classList.contains("close-description-btn")) {
      target.closest(".hide-text").style.marginBottom = "-100%";
      return false
    }
    event.target.querySelector(".hide-text").style.marginBottom = "0px"
  
  };
  
  document.querySelectorAll(".game-image-description").forEach(item =&gt; item.addEventListener("click", handleClick))</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.game-image-description {
    overflow: hidden;
    position: relative;
  }
  
  .game-image-description img {
    max-height: 250px;
  }
  
  .game-item {
        flex-basis: 31%;
      background: #081b49;
      max-width: 400px;
      margin: 0 1% 40px;
  }
  
  .hide-text {
    background: #000000e3;
    padding: 25px 12px 15px 12px;
    height: 70%;
    position: absolute;
    margin-bottom: -100%;
    font-size: 16px;
    color: #fff;
    border: 3px dashed #d5f34a;
    cursor: pointer;
    text-align: center;
    bottom: 0;
    transition: margin 0.3s linear;
  }
  
  .close-description-btn {
    background: 0 0;
    border: 0;
    color: #d5f34a;
    outline: 0;
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 100;
    font-size: 17px;
  }
  
  .game-item__button {
    height: 60px;
    width: 100%;
    max-width: 470px;
    text-align: center;
    margin: 20px auto;
    display: block;
    background: #d5f34a;
    border: 0;
    outline: 0;
    border-radius: 10px;
    color: #35539c;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: 600;
  }
  
  img {
    max-width: 100%;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="game-items-cart" class="game-carts elastic"&gt;
    &lt;article data-custom-sort="5" class="game-item box"&gt;
      &lt;div class="game-item__image"&gt;
        &lt;div class="game-image-description"&gt;
          &lt;p itemprop="description" class="hide-text"&gt;
            &lt;button class="close-description-btn"&gt;✖&lt;/button&gt; Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
            tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
            odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
          &lt;/p&gt;
          &lt;img src="https://s1.stc.all.kpcdn.net/putevoditel/projectid_346574/images/tild3037-3837-4461-a261-663863336336__photo.jpg" alt=""&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;button class="game-item__button"&gt;click&lt;/button&gt;
    &lt;/article&gt;
    &lt;article data-custom-sort="5" class="game-item box"&gt;
  
      &lt;div class="game-item__image"&gt;
        &lt;div class="game-image-description"&gt;
          &lt;p itemprop="description" class="hide-text"&gt;
            &lt;button class="close-description-btn"&gt;✖&lt;/button&gt; Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
            tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
            odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
          &lt;/p&gt;
          &lt;img src="https://s1.stc.all.kpcdn.net/putevoditel/projectid_346574/images/tild3037-3837-4461-a261-663863336336__photo.jpg" alt=""&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;button class="game-item__button"&gt;click&lt;/button&gt;
    &lt;/article&gt;
    &lt;article data-custom-sort="5" class="game-item box"&gt;
  
      &lt;div class="game-item__image"&gt;
        &lt;div class="game-image-description"&gt;
          &lt;p itemprop="description" class="hide-text"&gt;
            &lt;button class="close-description-btn"&gt;✖&lt;/button&gt; Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
            tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
            odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
          &lt;/p&gt;
          &lt;img src="https://s1.stc.all.kpcdn.net/putevoditel/projectid_346574/images/tild3037-3837-4461-a261-663863336336__photo.jpg" alt=""&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;button class="game-item__button"&gt;click&lt;/button&gt;
    &lt;/article&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>