#cards{
display: grid;
grid-template-columns: repeat(2, 2fr);
}

#click:hover {
    transform: scale(0.5);
    }
    
#click {
    transition: transform 0.5s;  
    position: relative;
  }

#info {
    position: absolute;
    top: 0px;
    left: 0px;
}

figure {
    position: relative;
}

.wrapper{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.colour-traits {
    position: relative;
}

.traits {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    transition: 0.6s;
}

.traits:hover{
    opacity: 1;
}

.traits > *{
    transform: translateY(25px);
    transition: transform 0.6s;
}

.traits:hover > *{
    transform: translateY(0px);
}

.traits p{
    color: white;
}

section{
    position: relative;
}

#character-images{
    display: grid;
    grid-template-rows: repeat(1fr,1fr);
    }

    #luz {
        animation-name: drivingAround;
        animation-duration: 10s;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
            }
        
        @keyframes drivingAround{
           0%{
            transform: translateX(0px);
           } 
           48%{
            transform: translateX(600px);
           }
           50%{
            transform: rotateY(180deg) translateX(-600px);
           }
           98%{
            transform: translateX(0px) rotateY(180deg);
           }
           100%{
            transform: translateX(0px);
           }
        }
        
            #luz {
                transition: transform 0.5s;  
              }

         #amity {
        animation-name: drivingAround;
        animation-duration: 20s;
        animation-iteration-count: infinite;
        animation-fill-mode: backwards;
            }
            @keyframes drivingAround{
                0%{
                 transform: translateX(0px);
                } 
                48%{
                 transform: translateX(600px);
                }
                50%{
                 transform: rotateY(180deg) translateX(-600px);
                }
                98%{
                 transform: translateX(0px) rotateY(180deg);
                }
                100%{
                 transform: translateX(0px);
                }
        }
        
            #amity {
                transition: transform 0.5s;  
              }