html body {
    width: 100%;
    height: 100vh;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
img{
    width: 400px;
    height: 400px;
}
#thumbnail-images{
    display: grid;


}
#thumbnail-images #img1 {
    grid-row: 2;
    grid-column: 1;
}

#thumbnail-images #img2 {
    grid-row: 2;
    grid-column: 2;
}

#thumbnail-images #img3 {
    grid-row: 2;
    grid-column: 3;
}

#large-image {
    grid-row: 1;
    grid-column: 1;
    grid-column-end: 4;
    width: 300px;
    height: 300px;
    margin: 20px;
    overflow: hidden;
}

#large-image .large {
    width: 300px;
    height: 300px;
    display: none;
}

#thumbnail-images img {
    width: 100px;
    height: 100px;
    
}

#thumbnail-images img:hover {
    cursor: pointer;
}

#img1:hover ~ #large-image #img1 {
    display: block;
}

#img2:hover ~ #large-image #img2 {
    display: block;
}

#img3:hover ~ #large-image #img3 {
    display: block;
}