html {
    width: 100%;
    overflow: hidden;
}

body{
    background-color: rgb(114, 0, 13);
}

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

.grid-item {
    background-color: rgb(82, 0, 26);
    min-height: 300px;
}
/* individual tiles */
.grid-item.a{
    background-color: rgb(183, 12, 66);
}

.grid-item.b{
    background-color: rgb(2183, 12, 66);
}
.grid-item.c{
    background-color: rgb(183, 12, 66);
}
.grid-item.d{
    background-color: white;
    rotate: -3deg;
}
.grid-item.e{
    background-color: rgb(183, 12, 66);
}
.grid-item.f{
    background-color: white;
    rotate: 20deg;
}
.grid-item.g{
    background-color: rgb(226, 43, 116);
}


.polaroid {
    box-shadow: 3px 12px 20px #6a6a6ad4;
    border: 20px solid white;
    border-bottom: 60px solid white;
}

.grid-item img{
    width: 100%;
}

/* Tablet */
@media screen and (max-width: 1024px) {
    #container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 430px) {
    /* body {
    background-color: deeppink;
}*/
    #container {
        grid-template-columns: 1fr;
    }
}