* {
  box-sizing: border-box;
}
body{
  color: brown;
  text-align: center;
  font-weight: bold;
}

img {
  width: 100%;
}

#principal {
  width: 80%;
  margin: auto;
}

.fila {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid orangered;
}

.columna {
  padding: 10px 20px;
  width: 100%;
}

.columna>div {
  background-color: lightblue;
  border: 2px lightcoral solid;
  border-radius: 10px;
}
.columna .columna>div{
  background-color: lightcoral;
}
.horizontal-final{
  justify-content: flex-end;
}
.horizontal-centro{
  justify-content: center;
}
.horizontal-separado{
  justify-content: space-between;
}
.vertical-centrado{
  align-items: center;
}
footer{
  min-height: 300px;
}
/* Media queries - Movil grande */
@media screen and (min-width:576px) {
  .movil-doce {
    width: 100%;
  }
  
  .movil-once {
    width: 91.6667%;
  }
  
  .movil-diez {
    width: 83.3333%;
  }
  
  .movil-nueve {
    width: 75%;
  }
  
  .movil-ocho {
    width: 66.6667%;
  }
  
  .movil-siete {
    width: 58.3333%;
  }
  
  .movil-seis {
    width: 50%;
  }
  
  .movil-cinco {
    width: 41.6667%;
  }
  
  .movil-cuatro {
    width: 33.3333%;
  }
  
  .movil-tres {
    width: 25%;
  }
  
  .movil-dos {
    width: 16.6667%;
  }
  
  .movil-uno {
    width: 8.3333%;
  }
}
/* Tablet vertical */
@media screen and (min-width:768px) {
  .tablet-v-doce {
    width: 100%;
  }
  
  .tablet-v-once {
    width: 91.6667%;
  }
  
  .tablet-v-diez {
    width: 83.3333%;
  }
  
  .tablet-v-nueve {
    width: 75%;
  }
  
  .tablet-v-ocho {
    width: 66.6667%;
  }
  
  .tablet-v-siete {
    width: 58.3333%;
  }
  
  .tablet-v-seis {
    width: 50%;
  }
  
  .tablet-v-cinco {
    width: 41.6667%;
  }
  
  .tablet-v-cuatro {
    width: 33.3333%;
  }
  
  .tablet-v-tres {
    width: 25%;
  }
  
  .tablet-v-dos {
    width: 16.6667%;
  }
  
  .tablet-v-uno {
    width: 8.3333%;
  }
}
/* Tablet horizontal */
@media screen and (min-width:992px) {
  .tablet-h-doce {
    width: 100%;
  }
  
  .tablet-h-once {
    width: 91.6667%;
  }
  
  .tablet-h-diez {
    width: 83.3333%;
  }
  
  .tablet-h-nueve {
    width: 75%;
  }
  
  .tablet-h-ocho {
    width: 66.6667%;
  }
  
  .tablet-h-siete {
    width: 58.3333%;
  }
  
  .tablet-h-seis {
    width: 50%;
  }
  
  .tablet-h-cinco {
    width: 41.6667%;
  }
  
  .tablet-h-cuatro {
    width: 33.3333%;
  }
  
  .tablet-h-tres {
    width: 25%;
  }
  
  .tablet-h-dos {
    width: 16.6667%;
  }
  
  .tablet-h-uno {
    width: 8.3333%;
  }
}
/* Laptop */
@media screen and (min-width:1200px) {
  .laptop-doce {
    width: 100%;
  }
  
  .laptop-once {
    width: 91.6667%;
  }
  
  .laptop-diez {
    width: 83.3333%;
  }
  
  .laptop-nueve {
    width: 75%;
  }
  
  .laptop-ocho {
    width: 66.6667%;
  }
  
  .laptop-siete {
    width: 58.3333%;
  }
  
  .laptop-seis {
    width: 50%;
  }
  
  .laptop-cinco {
    width: 41.6667%;
  }
  
  .laptop-cuatro {
    width: 33.3333%;
  }
  
  .laptop-tres {
    width: 25%;
  }
  
  .laptop-dos {
    width: 16.6667%;
  }
  
  .laptop-uno {
    width: 8.3333%;
  }
}
/* Desktop */
@media screen and (min-width:1400px) {
  .desktop-doce {
    width: 100%;
  }
  
  .desktop-once {
    width: 91.6667%;
  }
  
  .desktop-diez {
    width: 83.3333%;
  }
  
  .desktop-nueve {
    width: 75%;
  }
  
  .desktop-ocho {
    width: 66.6667%;
  }
  
  .desktop-siete {
    width: 58.3333%;
  }
  
  .desktop-seis {
    width: 50%;
  }
  
  .desktop-cinco {
    width: 41.6667%;
  }
  
  .desktop-cuatro {
    width: 33.3333%;
  }
  
  .desktop-tres {
    width: 25%;
  }
  
  .desktop-dos {
    width: 16.6667%;
  }
  
  .desktop-uno {
    width: 8.3333%;
  }
}