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

body {
    background-color: pink;
}

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

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

    gap: 20px;
    
    /* limit width for TVs etcs */
    max-width: 2000px;

    /* center grid */
    position: relative;
    margin: 0 auto;
}
/* #container div */
.grid-item {
    min-height: 300px;
    background-color: azure;
    height: fit-content;
}

/* Individual items */
.grid-item.a{
    background-color: rgb(117, 163, 163);
}
.grid-item.b{
    background-color: rgb(117, 163, 119);
    rotate: -5deg;
}
.grid-item.c{
    background-color: red;
}
.grid-item.d{
    background-color: rgb(163, 117, 155);
    rotate: 13deg;
}
.grid-item.e{
    background-color: rgb(119, 117, 163);
}

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

.grid-item img{
    width: 100%;
}
/* override | fix for frame height */
.grid-item.b{
    /* height: 260px; */
    background-color: white;
    min-height: unset;
}
figcaption{
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
}

/* 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;
    }
    body {
        background-color:green;
    } 
}