.card-body {
      background-color: #000000;
      width: 320px;
      height: 210px;
      border-radius: 3px;
      position: relative;
    }
    .card-img {
      width: 320px;
    }

    .game-title {
      font-size: 24px;
      margin: 0 30px;
    }

    span {
      margin: 0;
      color: white;
    }

    .flatfrom-icons {
      margin: 0 10px 0 20px;
    }
    .flatfrom-icons>i {
      color: white;
    }

    .small-content {
      font-size: 13px;
      display: flex;
      justify-content: flex-end;
    }

    .tags {
      display: flex;
      justify-content: flex-start;
      position: absolute;
      bottom: 65px;

    }
    .tag {
      margin: 0 5px;
      padding: 2px 5px;
      color: white;
      font-size: 12px;
      background-color: rgba(0, 0, 0, 0.6);
      border-radius: 4px;

      
      height: 0;
      opacity: 0;
      overflow-y: hidden;
      transition: height 0.5s ease, opacity 0.5s ease;
    }

  const cardBody = document.getElementById("card-body");
  const tagList = document.getElementsByClassName("tag");
  const tags = document.getElementById("tags");

  for (let i=0; i<tagList.length; i++ ) {
    console.log(tagList[i].style)
  }
  cardBody.addEventListener("mouseenter", event => {
    for (let i=0; i<tagList.length; i++ ) {
      tagList[i].style.height = tagList[i].scrollHeight + 'px';
      tagList[i].style.opacity = 1;
      tagList[i].style.transitionDelay = i * 0.08 + 's';
    }
  })
  cardBody.addEventListener("mouseleave", event => {
    for (let i=0; i<tagList.length; i++ ) {
      tagList[i].style.height = null;
      tagList[i].style.opacity = 0;
      tagList[i].style.transitionDelay = i * 0.08 + 's';
    }
  })