/* Define el grid del main */

/* 2 items */

.grid-2 {
  display: grid;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2px;
}

.grid-2 div {
  color: white;
  font-size: 20px;
  padding: 5px;
  height: 200px;
}


/* 3 items */  
  
.grid-3 {
  display: grid;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2px;
}

/* items */

.grid-3 div {
  color: white;
  font-size: 20px;
  padding: 5px;
  height: 200px;
  }

.item-33 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 2;
}


/* 4 items */ 

.grid-4 {
  display: grid;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2px;
}

.grid-4 div {
  color: white;
  font-size: 20px;
  padding: 5px;
  height: 200px;
}

/* 5 items */ 

.grid-5 {
  display: grid;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2px;
}

.grid-5 div {
  color: white;
  font-size: 20px;
  padding: 5px;
  height: 200px;
  }


.item-54 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 2;
}

/* 1 item */ 

.grid-1 {
  padding-top: 40px;
  display: grid;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 2px;
}

.grid-1 div {
  color: white;
  }
  
.grid-utilidad {
  display: grid;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0px;
}

.grid-utilidad div {
  color: black;
  }
  
 /* Grid del consejo o receta del día */
 
 .grid-container_day {
  display: grid;
  grid-template-columns: 110px calc(100% - 110px);
  grid-gap: 0px;
  background-color: transparent;
  border-radius:10px;
  padding:0px 0px 10px 0px;
}

.grid-container_day > div {
  background-color: transparent;
  text-align: left;

  /*padding: 10px 0;*/
}

/*
<section class='grid-2'>
  <div class='item-21'>1</div>
  <div class='item-22'>2</div>
</section>

<section class='grid-3'>
  <div class='item-31'>1</div>
  <div class='item-32'>2</div>
  <div class='item-33'>3</div>
</section>

<section class='grid-4'>
  <div class='item-41'>1</div>
  <div class='item-42'>2</div>
  <div class='item-43'>3</div>
  <div class='item-44'>4</div>
</section>

<section class='grid-5'>
  <div class='item-51'>1</div>
  <div class='item-52'>2</div>
  <div class='item-53'>3</div>
  <div class='item-54'>4</div>
  <div class='item-55'>5</div>
</section>

<section class='grid-1'>
  <div class='item-51'>1</div>
</section>
*/