.parent {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(0, min(100%/2, max(20%, 100%/5))));
              text-align: center;
            }

            .child {
              width: 100%;
              height: 100%;
              padding: 15px;
            }

@media(max-width: 1400px){
            
            .parent {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(0, min(100%/2, max(20%, 100%/5))));
              text-align: center;
            }

            .child {
              width: 100%;
              height: 100%;
              padding: 15px;
            }

         }


@media(max-width: 1200px){
            
            .parent {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(0, min(100%/2, max(20%, 100%/5))));
              text-align: center;
            }

            .child {
              width: 100%;
              height: 100%;
              padding: 15px;
            }

         }



@media(max-width: 576px){
            
            .parent {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(0, min(100%/2, max(50%, 100%/2))));
              text-align: center;
            }

            .child {
              flex: 0 0 auto;
               width: 100%;
            }

         }