.grid-container{
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 1fr;
    grid-auto-columns: 1fr;
    height: 100vh;
    gap: 10px;
}
.image{
    height: 1fr;
    width: 1fr;
}
.image img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.image-1{
    grid-row: span 3;
    /* background-color: orange; */
}
.image-2{
    grid-row: span 2;
    /* background-color: azure; */
}
.image-3{
    grid-row: span 3;
    grid-column: span 2;
    /* background-color: blue; */
}
.image-4{
    /* background-color: yellowgreen; */
    grid-row: span 3;
}
.image-5{
    grid-row: 4/6;
    /* grid-row: span 2; */
    /* background-color: aqua; */
}
.image-6{
    grid-row: span 3;
    /* background-color: violet; */
}
.image-7{
    grid-area:4/3/6/4;
    /* background-color: yellow; */
}
.image-8{
    grid-area:4/4/6/6;
   /* background-color: yellowgreen; */
}
@media(max-width:800px){
    .grid-container{
        grid-template-columns: repeat(4,1fr);
        /* grid-template-rows: repeat(4,1fr); */
    }
}
@media(max-width:500px){
    .grid-container{
        display:block ;
        .image{
            height: 50%;
        }
    }
}