@media screen and (max-width: 480px), (max-width: 600px), (max-width: 768px), (max-width: 1024px), (max-width: 1200px), (max-width: 1400px) {
      
		.wrapper-main {
		  width: 100%;
		}

		@media screen and (max-width: 100vw){

		body {
		   flex-direction: column;
		   grid-auto-flow: row;
		   }
  
		p {
		  display:block;
		  font-size: 1.5rem;
		  text-align: justify;
		  width:90%;
		  }
		}
		
		img {
		  display: block;
		  max-width: 100%;
		}
  
		.image-container1 {
		  float: left;
		  width: 60%;
		  height: auto;
		}
  
		.image-container2 {
		  float: right;
		  width: 50%;
		  height: auto;
		}
  
		.center {
		  display: block;
		  margin-left: auto;
		  margin-right: auto;
		  width: 50%;
		}
		
	}

          @media only screen and (max-width: 800px) {
            /* for mobile phones: */
            [class*="col-"] {
            width: 100%;
          }
		}