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

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

body{
    background-color: #f0bcec;

}


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

 .grid-item{
    background-color: rgb(255, 79, 138);
    min-height: 300px;
}

.grid-item.a{
    background-color: rgb(138, 72, 106);

}
.grid-item.b{
    background-color: rgb(247, 211, 227);

}
.grid-item.c{
    background-color: rgb(212, 129, 180);


}

.grid-item.d{
    background-color: rgb(255, 190, 226);

}
.grid-item.e{
    background-color: rgb(243, 188, 236);


}
.grid-item.f{
    background-color: rgb(255, 173, 250);

}

.grid-item.g{
    background-color: rgb(235, 82, 156);


}

.grid-item.h{
    background-color: rgb(235, 174, 210);

}
.grid-item.i{
    background-color: rgb(184, 130, 184);

}

.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);  }
         
}
/* iphone */
@media screen and (max-width:430px){
    
    #container { 

        grid-template-columns: repeat(1, 1fr); 
    gap: 30px; }
        
}