@keyframes show-data {
    50% {
      transform: translateY(-10rem);
    }
    100% {
      transform: translateY(-7rem);
    }
  }
  
  @keyframes remove-overflow {
    to {
      overflow: initial;
    }
  }
  
  @keyframes remove-data {
    0% {
      transform: translateY(-7rem);
    }
    50% {
      transform: translateY(-10rem);
    }
    100% {
      transform: translateY(.5rem);
    }
  }
  
  @keyframes show-overflow {
    0% {
      overflow: initial;
      pointer-events: none;
    }
    50% {
      overflow: hidden;
    }
  }
  
  
  .card__article {
    position: relative;
    overflow: hidden;
  }
  .card__img{
    border-radius: 1.5rem;
  }
  
  .card__article {
    position: relative;
    overflow: hidden;
  }
  
  
  .card__data {
    width: 280px;
    background-color:white;
    padding: 1.5rem 2rem;
    box-shadow: 0 8px 24px hsla(0, 0%, 0%, .15);
    border-radius: 1rem;
    position: absolute;
    bottom: -5rem;
    left: 0;
    right: 0;
    margin-inline: auto;
    opacity: 0;
    transition: opacity 3s ; 
  }
  
  
  
  .card__article:hover .card__data {
    animation: show-data 1s forwards;
    opacity: 1;
    transition: opacity .3s;
  }
  
  .card__article:hover {
    animation: remove-overflow 2s forwards;
  }
  
  .card__article:not(:hover) {
    animation: show-overflow 2s forwards;
  }
  
  .card__article:not(:hover) .card__data {
    animation: remove-data 1s forwards;
  }