body {
  color: black;
  background-color: azure;
}

.centering {
  text-align: center;
}

.centering h3 {
  width: 100%;
}

@media screen and (min-width: 600px) {
  body {
    font-size: 150%;
	background-color: powderblue;
  }
}

@media screen and (min-width: 800px) {
  body {
    font-size: 200%;
	background-color: lightblue;
  }
}

@media screen and (min-width: 1024px) {
  body {
    font-size: 250%;
	background-color: lightskyblue;
  }
}

@media screen and (min-width: 1600px) {
  body {
    font-size: 300%;
	background-color: mediumturquoise;
  }
}




	  

@media all and (max-width: 500px) {
  .not-so-important { display: none; }
}

* {
  box-sizing: border-box;
}

.col-1 {width: 25%;}
.col-2 {width: 50%;}
.col-3 {width: 75%;}
.col-4 {width: 100%}

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid black;
}

.desktop { display: table; }
.mobile { display: none; }

@media only screen and (max-width: 500px) {
  [class*="col-"] {
    width: 100%;
  }
  .desktop { display: none; }
  .mobile { display: table; }
}

.row::after {
  content: "";
  clear: both;
  display: table;
}