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

html {
    width: 100%;
    overflow-x: hidden;
}
body {
    background-color: white;
}

#container {
    padding: 15px;
    display: grid;
    /* grid-template-columns: 1fr 1fr 2fr */
    /* grid-template-columns: repeat(5.1fr) */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
    /* limit the width on TVS */

    max-width: 2000px;
    /* Align in the middle */
    position: relative;
    margin: 0 autio;
}

.grid-item {
    background-color: white;
    min-height: 300px;
}

.grid-item.a {
    background-color: rgb(218, 116, 234);
}
.grid-item.b {
    background-color: white;
    rotate: 5deg;
}
.grid-item.c {
    background-color: rgb(234, 110, 110);
}
.grid-item.d {
    background-color: rgb(253, 139, 156);
}
.grid-item.e {
    background-color: rgb(236, 238, 118);
}
.grid-item.f {
    background-color: rgb(218, 147, 114);
    rotate: -10deg;
}
.grid-item.g {
    background-color: rgb(120, 221, 93);
    rotate: 10deg;
}

.polaroid {
    box-shadow: 3px 12px 20px black;
    border: 20px solid white;
    border-bottom: 60px solid white;

}

.grid-item img {
    width: 100%;
}
/* Tablet*/
@media screen and (max-width: 1024px) {
    body {
        background-color: lightblue;
    }

    #container {
        grid-template-columns: repeat(2.1fr); 
    }
}

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

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