body{
    font-family: 'Lato', sans-serif;
    background: linear-gradient(to left, rgb(86, 113, 235), #131414);
}
h2{
    font-weight: 400;
}
p{
   
  font-weight: 300;
}
header{
  width:  91%;;
 height:  auto;
 
  display: flex;
  justify-content: space-around;
}
.dad{
  text-decoration: none;
}

.container{
    margin: 0 auto;
    width: 90%;
    
}
.flex{
    display: flex;
    flex-wrap: wrap;
}
.text-center{
    text-align: center;
}
li{
  list-style: none;
  margin: 10px;
}
a{
  text-decoration: none;
  color: #ffffff;
}
.columna{
 background: rgb(238, 238,238);
 color: #333;
 border: 1px solid #333;
 box-sizing: border-box;  
 margin: 0 auto;
 padding: 10px;
 border-radius: 5px;
 justify-content: space-around;
 width: 23%;
 box-shadow: 5px -5px 15px #888;
   
}
.precio{
    font-size: 50px;
    color: #00dac7;
}
.btn{
    display: block;
    background: linear-gradient(to left, rgb(108, 132, 238), #252525);
    text-decoration: none;
    color: #ffffff;
    padding: 10px;
    border-radius: 3px;
    margin-bottom: 10px;
}
.btn:hover{
    background: rgb(243, 235, 235);
    color: #131414;
}
img{
  width:100%;
}
@media (max-width:1070px){
    .columna{
    width: 45%;
    margin: 5px;
  } 
  .precio{
    color:goldenrod;
  }
}
@media (max-width:600px){
    .columna{
    width: 45%;
    margin: 5px;
  } 
  .precio{
    color:red;
  }
}
@media (max-width:400px){
    .columna{
    width: 100%;
    margin: 5px;
  } 
  .precio{
    color:red;
  }
}

@media(min-width:468px){
  ul{
    display: flex;
    justify-content: space-between;
  }
  header{
   margin: 0;
   padding: 0;
   display: flex;
   text-align: center;
  }
  
  
}