* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    html
        width: 100%;
        overflow-x: hidden;

}

body{
    background-color:blueviolet;

}

#container{
    padding:10px
    display:grid;
    /*grid-template-columns: 1fr 1fr 2fr; */
    grid-template-columns: repeat (5, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr00));
    gap: 30px;
    /* limit width on TVs...*/
    max-width: 2000px;
    /* align in the middle...*/
    position:relative;
    margin: 0 auto;
}

.grid-item{
    background-color: azure;
    min-height: 300px;
}
.grid-item.a{
    background-color: aqua;
}
.grid-item.b{
    background-color: rgb(255, 0, 221);
}
.grid-item.c{
    background-color: rgb(111, 0, 255);
}
.grid-item.d{
    background-color: rgb(255, 106, 0);
    rotate: -3deg;
}
.grid-item.e{
    background-color: black;


}.grid-item.f{
    background-color: rgb(255, 0, 187);
    rotate= 20deg;
}
.grid-item.g{
    background-color: rgb(183, 255, 0);
}
.polaroid{
    box-shadow: 3px 12px 20px;
    border: 20px solid white; 
    border-bottom: 60px solid white;
}
.grid-item img{
    width: 100%;
}

@media screen and (max-width: 600px) {

    body{
        background-color: deeppink;
    } */

    #container {
        grid-template-columns: 1fr;

    }

}

/* Tablet */
@media screen and (max-width: 1024px) {
    body {
        background-color: cadetblue;

    }
    #container {
        grid-template-columns: repeat(2,1fr);
    }
}

    

    
/* Phone*/
@media screen and (max-width: 430px) {
    /* body {
    background-color: cadetblue;

}*/
}