/*=============== CARD ===============*/
.container{
    display: grid;
    place-items: center;
    margin-inline: 1.5rem;
    padding-block: 5rem;
 }
 
 .card{
    &__container{
       display: grid;
       row-gap: 3.5rem;
    }
    &__article{
       position: relative;
       overflow: hidden;
    }
    &__img{
       width: 328px;
       border-radius: 1.5rem;
    }
    &__data{
       width: 280px;
       background-color: var(--container-color);
       padding: 1.5rem 2rem;
       box-shadow: 0 8px 24px hsla(0, 0%, 0%, .15);
       border-radius: 1rem;
       position: absolute;
       bottom: -9rem;
       left: 0;
       right: 0;
       margin-inline: auto;
       opacity: 0;
       transition: opacity 1s 1s;
    }
    &__description{
       display: block;
       font-size: var(--small-font-size);
       margin-bottom: .25rem;
    }
    &__title{
       font-size: var(--h2-font-size);
       font-weight: 500;
       color: var(--title-color);
       margin-bottom: .75rem;
    }
    &__button{
       text-decoration: none;
       font-size: var(--small-font-size);
       font-weight: 500;
       color: var(--first-color);
 
       &:hover{
          text-decoration: underline;
       }
    }
    // Naming animations in hover
    &__article:hover &__data{
       animation: show-data 1s forwards;
       opacity: 1;
       transition: opacity .3s;
    }
    &__article:hover{
       animation: remove-overflow 2s forwards;
    }
    &__article:not(:hover){
       animation: show-overflow 2s forwards;
    }
    &__article:not(:hover) &__data{
       animation: remove-data 1s forwards;
    }
 }
 
 /* Card animation */
 @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;
    }
 }