/* CSS RESET */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid red;
}

img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    body{
        background-color: pink;
    }

    .container{
        display: flex;
        flex-flow: row wrap;
        gap: 20px;
    }

    .photo-item{
        width: 100%;
        height: 300px;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    body{
        background-color: blue;
    }
    .container{
        display: flex;
        flex-flow: row wrap;
    }

    .photo-item{
        width: 100%;
        height: 300px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    body{
        background-color: green;
    }
    .photo-item{
        width: 33.33%;
    }

    #box2, #box3{
        width: 66.66%;
    }

    #box11, #box22, #box23{
        width: 100%;
    }

    #box12, #box13, #box17, #box18{
        width: 50%;
    }

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    body{
        background-color: orange;
    }
    
    #box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8, #box9, #box10, #box11, #box12, #box13, #box14, #box15, #box16, #box17, #box18, #box19, #box20, #box21, #box22, #box23{
        width: 100%;
        height: 100%;
    }

    .container{
        display: grid;
        grid-template-columns: 4fr 3fr 3fr 1fr 3fr; /* 5 cols, over 14 fraction */
        grid-template-rows: 2fr 1fr 1fr 3fr 1fr 2fr 2fr 2fr 1fr 1fr 1fr 2fr 1fr 3fr 4fr 4fr 3fr; /* 17 rows, over 34 fractions */
        height: 300vh;
        gap: 10px;
    }

    #box1{
        grid-column: 1/3;
        grid-row: 1/6;
    }

    #box2{
        grid-column: 3/5;
        grid-row: 1/3;
    }

    #box3{
        grid-column: 3/5;
        grid-row: 3/5;
    }

    #box4{
        grid-column: 5/6;
        grid-row: 1/2;
    }

    #box5{
        grid-column: 5/6;
        grid-row: 2/4;
    }

    #box6{
        grid-column: 5/6;
        grid-row: 4/5;
    }

    #box7{
        grid-column: 3/6;
        grid-row: 5/10;
    }

    #box8{
        grid-column: 1/2;
        grid-row: 6/8;
    }

    #box9{
        grid-column: 1/2;
        grid-row: 8/11;
    }

    #box10{
        grid-column: 2/3;
        grid-row: 6/7;
    }

    #box11{
        grid-column: 2/3;
        grid-row: 7/8;
    }

    #box12{
        grid-column: 2/3;
        grid-row: 8/9;
    }

    #box13{
        grid-column: 2/3;
        grid-row: 9/11;
    }

    #box14{
        grid-column: 1/3;
        grid-row: 11/15;
    }

    #box15{
        grid-column: 3/5;
        grid-row: 10/13;
    }

    #box16{
        grid-column: 3/5;
        grid-row: 13/15;
    }

    #box17{
        grid-column: 5/6;
        grid-row: 10/12;
    }

    #box18{
        grid-column: 5/6;
        grid-row: 12/14;
    }

    #box19{
        grid-column: 5/6;
        grid-row: 14/15;
    }

    #box20{
        grid-column: 1/4;
        grid-row: 15/18;
    }

    #box21{
        grid-column: 4/6;
        grid-row: 15/16;
    }

    #box22{
        grid-column: 4/6;
        grid-row: 16/17;
    }

    #box23{
        grid-column: 4/6;
        grid-row: 17/18;
    }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}