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

body {
    background-color: rgb(249, 235, 209);
}

#container {
    display: grid;
    /* grid-template-coloumns: 1fr 1fr 1fr; */
    /* grid-template-columns: repeat(3, 1fr); */

    /* grid-template-columns: 1fr 1fr 1fr; */
    grid-template-columns: repeat(1, 1fr) 1fr;

    grid-template-columns: repeat(auto-fill, minmax (300px, 1fr));
    gap: 20px;

    /* limit grid for TVs etcs */
    max-width: 2000px;
    /* center grid */
    position: relative;
    margin: 0 auto;

}

.grid-item {
    min-height: 200px;
    background-color: antiquewhite;
}

/* Individual items */
.grid-item.a{
    background-color: white;
    border: 20px solid white;
    border-bottom: 60px solid white;
}
.grid-item.b{
    background-color: aliceblue;
    rotate: -5deg;
}
.grid-item.c{
    background-color: rgb(183, 204, 223);
}
.grid-item.d{
    background-color: rgb(90, 168, 109);
}
.grid-item.e{
    background-color: rgb(241, 200, 95);
}

.polaroid {
    border: 20px solid white;
    border-bottom: 60px solid white;
    box-shadow: 2px 10px 13px black;
}

.grid-item img {
    width: 100%;
}
/* override | fix for frame height */
.grid-item.a{
   
    min-height: unset;
}
figcaption{
    font-family: cursive;
    font-size: 26px;
}
/* Tablet */
@media screen and (max-width: 1024px){
    #container {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Mobile */
@media screen and (max-width: 430px){
    #container {
        grid-template-columns: 1fr;
    }
}