* {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
}
ul {
height: 4vh;
display: flex;
justify-content: center;
align-items: center;
gap: 20vw;
}
.boxes {
background: url("img.jpg") no-repeat center/cover;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    #container, #containerNew {
    width: 100vw;
    display: flex; 
    flex-direction: column;
    gap: 1vh;
    }
    .boxes {
    height: 200px;
    width: auto;
    display: flex;
    }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    #container, #containerNew {
    width: 100vw;
    display: flex; 
    flex-direction: column;
    gap: 1vh;
    }
    .boxes {
    height: 200px;
    width: auto;
    display: flex;
    }
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    #container {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 2fr 1fr 1fr 1fr 1fr 2fr;
    }
    .boxes {
    height: auto;
    }
    #item1 {
    grid-area: span 1 / span 6;
    }
    #item2, #item3, #item4, #item6, #item7 {
    grid-area: span 1 / span 2;
    }
    #item5 {
    grid-area: span 2 / span 4;
    }
    #item8, #item9 {
    grid-area: span 1 / span 3;
    }
    #item10 {
    grid-area: span 1 / span 6;
    }

    #containerNew {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    }
    .boxes {
    height: auto;
    }
    #itemNew1, #itemNew6, #itemNew10 {
    grid-area: span 1 / span 6;
    }
    #itemNew2, #itemNew3, #itemNew4, #itemNew5 {
    grid-area: span 1 / span 3;
    }
    #itemNew7, #itemNew8, #itemNew9 {
    grid-area: span 1 / span 2;
    }
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    #container {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(5, 1fr);
    }
    #item1 {
    grid-area: 1 / 1 / 2 / 7;
    }
    #item2 {
    grid-area: 2 / 1 / 3 / 4;
    }
    #item3 {
    grid-area: 2 / 4 / 3 / 7;
    }
    #item4 {
    grid-area: 3 / 1 / 5 / 7;
    }
    #item5 {
    grid-area: 5 / 1 / 6 / 3;
    }
    #item6 {
    grid-area: 5 / 3 / 6 / 5;
    }
    #item7 {
    grid-area: 5 / 5 / 6 / 7;
    }
    #item8 {
    grid-area: 1 / 7 / 2 / 10;
    }
    #item9 {
    grid-area: 2 / 7 / 5 / 10;
    }
    #item10 {
    grid-area: 5 / 7 / 6 / 10;
    }
    #containerNew {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(12, 1fr);
    }
    #itemNew1 {
    grid-area: 1 / 1 / 4 / 1;
    }
    #itemNew2 {
    grid-area: 4 / 1 / 7 / 1;
    }
    #itemNew3 {
    grid-area: 7 / 1 / 10 / 1;
    }
    #itemNew4 {
    grid-area: 10 / 1 / 13 / 1;
    }
    #itemNew5 {
    grid-area: 1 / 2 / 5 / 2;
    }
    #itemNew6 {
    grid-area: 5 / 2 / 9 / 2;
    }
    #itemNew7 {
    grid-area: 9 / 2 / 13 / 2;
    }
    #itemNew8 {
    grid-area: 1 / 3 / 4 / 3;
    }
    #itemNew9 {
    grid-area: 4 / 3 / 10 / 3;
    }
    #itemNew10 {
    grid-area: 10 / 3 / 13 / 3;
    }
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
/* i wasnt sure if i should leave this or not as it is dead weight, so i left it to be safe */
}