*{
  box-sizing: border-box;
}


body{
color: rgb(4, 1, 1);
text-align: center;
font-weight: bold;  
}
#principal {
  width: 80%;
  margin: auto;
}
.fila{
  display: flex;
  flex-wrap: wrap;
  border: 1px solid wheat;
}
.columna{
 
  padding: 10px 20px ;
  width: 100% ;
  
}

.columna > div {
  background-color: rgb(173, 216, 230); 
  border: 2px solid rgb(70, 130, 180);
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}

.columna .columna > div {
  background-color: rgb(60, 179, 113);
  color: white;
  border: 2px solid rgb(34, 139, 34);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

img{
  width: 50%;
}


.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;
}
/* mobile */
@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%;
}

}

/* dekstop */
@media screen and (min-width:1400px) {
.dekstop-doce {
  width: 100%;
}

.dekstop-once {
  width: 91.6667%;
}

.dekstop-diez {
  width: 83.3333%;
}

.dekstop-nueve {
  width: 75%;
}

.dekstop-ocho {
  width: 66.6667%;
}

.dekstop-siete {
  width: 58.3333%;
}

.dekstop-seis {
  width: 50%;
}

.dekstop-cinco {
  width: 41.6667%;
}

.dekstop-cuatro {
  width: 33.3333%;
}

.dekstop-tres {
  width: 25%;
}

.dekstop-dos {
  width: 16.6667%;
}

.dekstop-uno {
  width: 8.3333%;
}

}