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

body{
    background-color: grey;
}

#container {
    display: grid;
/* grid-template-columns: 1fr 1fr 2fr; */
/* grid-template-columns: repeat(5, 1fr); */
grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
gap: 30px;

/* limits the width on big screens */
max-width: 3000px;

/* how to center: */

position: relative;
margin: 0 auto;

/* How to get ride of sideways scroll */



}

.grid-item{
    background-color: azure;
    min-height: 300px;
}
/* Tile Templates Below */
.grid-item.a{
    background-color: green;
}
/* Fun FRAMES */
.grid-item.b{
    background-color: rgb(73, 161, 184);
    rotate: -6deg;
    box-shadow: 3px 12px 20px;
    border: 20px solid white;
    border-bottom: 60px solid white;
}
.grid-item.c{
    background-color: rgb(24, 46, 24);
}
.grid-item.d{
    background-color: rgb(208, 185, 12);
    rotate: -3deg;
}
.grid-item.e{
    background-color: rgb(31, 33, 154);
}
.grid-item.f{
    background-color: rgb(92, 7, 92);
    rotate: 20deg;
}
.grid-item.g{
    background-color: rgb(128, 0, 79);
}

.polaroid {
    box-shadow: 3px 12px 20px;
    border: 20px solid white;
    border-bottom: 60px solid white;
}
/* Make images fit within border */
.grid-item img{
    width: 100%;
}

/* "@media screen" changes stuff when screen size is something like below*/
/* tablet */
@media screen and (max-width:1024px) {
    
    body{
background-color: deeppink;

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

    
    }
}
/* phone */
    @media screen and (max-width:430px) {
    
        body{
    background-color: rgb(0, 166, 8);
    
        }
        #container {
            display: grid;
        grid-template-columns: repeat(1, 1fr);
    
        
        }
}