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

body {
    background-color: whitesmoke;
}
.container {
    /* border: 1px solid black ; */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    justify-content: space-around;
    margin: 0px 150px;
    padding: 20px 150px;
    background-color: white;
}
.child {
    /* border: 1px solid red; */
}
.child>img {
    width: 100%;
    height: 100%;
}
#box-1 {
    grid-column: 1/2 ;
    grid-row: 1/3;
}
#box-2 {
    grid-column: 2/3 ;
    grid-row: 1/2;
}
#box-3 {
    grid-column: 3/4 ;
    grid-row: 1/3;
}
#box-4 {
    grid-column: 4/5 ;
    grid-row: 1/2;
}
#box-5 {
    grid-column: 5/6 ;
    grid-row: 1/3;
}
#box-6 {
    grid-column: 1/2 ;
    grid-row: 3/5;
}
#box-7 {
    grid-column: 2/3 ;
    grid-row: 2/4;
}
#box-8 {
    grid-column: 3/4 ;
    grid-row: 3/5;
}
#box-9 {
    grid-column: 4/5 ;
    grid-row: 2/4;
}
#box-10 {
    grid-column: 5/6 ;
    grid-row: 3/5;
}
#box-11 {
    grid-column: 1/2 ;
    grid-row: 5/6;
}
#box-12 {
    grid-column: 2/3 ;
    grid-row: 4/6;
}
#box-13 {
    grid-column: 3/4 ;
    grid-row: 5/6;
}
#box-14 {
    grid-column: 4/5 ;
    grid-row: 4/6;
}
#box-15 {
    grid-column: 5/6 ;
    grid-row: 5/6;
}
/* @media (max-wight: 600px) {
    #box-1 {
        grid-column: auto; 
        grid-row: auto; 
        grid-template-columns: repeat(1, 1fr);
        background-color: blue;
    }
} */