* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


a{
    color: #ffffff;
    transition: color 0.5s;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

a:link{
    max-width: 300px;
    height: 290px; 
}

article{
    max-width: 300px;
    height: 290px;
    background-color: #ff5ec1;
    position: relative;
}


body{
    background-color: #ffcae6;
}

figure{
    width: 100%;
    margin: 0;
    padding: 0;
}

#cards{
    display: grid;
    columns: 1fr;
    max-width: 500px;
    aspect-ratio: 11 / 3;
    padding: 1em;
}

#cards img{
    width: 100%;
    aspect-ratio: 6/ 4;
    overflow: clip;
    object-fit: overflow;
    top: 0;
}

#cards article{
    border-radius: 20px;
}



#cards figure{
    position: relative;
}

#cards section{
    position: absolute;
    bottom: 0;
    top: 14.12rem;

}

#cards .top{
    opacity: 0;
    position: relative;
    top: -11rem;
    transition: 0.25s;
}

#cards a:hover .top{
    opacity: 1;
    transform: translateY(-1.7rem);
}


#cards a:hover section{
    transform: translateY(-1rem);
    transition: transform 0.25s;
}

#cards p{
    opacity: 0;
    text-align: center;
    margin-top: 5px;
}

#cards a:hover p{
    opacity: 1;
    transition: 0.25s;
}

#cards h3{
    font-size: 25px;
    text-align: center;
}

@media only screen and (min-width: 1080px) {
    #cards{
        display: grid;
        columns: 1fr 1fr 1fr;
    }
    
}