index.css

:root {
    --red: rgb(216, 56, 56)
}
html {
    height: 100%;   
}
body {
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    background-color: rgb(229, 215, 190);
    font-family: 'Patua One', cursive;
}
h1 {
    margin-top: 0;
    font-size: 3em;
    color: var(--red);
}
#game img {
    width: 100%;
    height: 100%;
}
.card {
    background-color: rgb(213, 151, 135);
    border-radius: 15px;
    box-shadow: 2px 3px 4px rgb(0 0 0 / 30%);
    cursor: pointer;
}
.card img {
    opacity: 0;
    border-radius: 15px;
}

/* 
    Add styles as necessary to accomplish the following: 

    1. The elements inside the div with id 'game' must be displayed in a grid of three rows and three columns, each 128px wide/tall. The grid must have a gap of 16px.
*/

#game {
    display: grid;
    grid-template-columns: repeat(3, 128px);
    grid-template-rows: repeat(3, 128px);
    gap: 16px;
}

/*

    2. Each image must transition from opacity: 0 to opacity: 1 on hover using any duration and timing function of your choice

*/
.img {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

img:hover {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}