#container{
    display:grid;
    width:fit-content;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    row-gap: 1rem;
    column-gap: 1rem;
    padding:2px;
    text-align: center;
    border-radius: 5px;
    /* border:5px solid red; */
    margin: 20px;
}

#container img{
    height:300px;
    width:300px;
    /* border:2px solid orange; */
    border-radius: 10px;
    margin:10px;
   
}

#container div{
    /* border:5px solid black; */
    background:orange;
  
}


@media only screen and (max-width: 1000px) {
    #container {
        display:grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        row-gap: 2rem;
        column-gap: 2rem;
    }
    /* #container div{
       background-color: rgb(243, 36, 71);
    } */
  
  }

  @media only screen and (max-width: 600px) {
    #container {
        display:grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        row-gap: 2rem;
        column-gap: 2rem;
    }
    /* #container div{
        background-color: rgb(36, 88, 243);
     } */
   
  }

   @media only screen and (max-width: 300px) {
    #container {
        display:grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: auto;
        row-gap: 2rem;
        column-gap: 2rem;
    }
} 
    /* #container div{
        background-color: rgb(79, 221, 28);
     } */