*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Rubik', sans-serif;
 /*background:  url("../img/portafolio2.jpg");*/
}

/*body{
display: flex;
Justify-content: center;
align-self: center;
min-height: 100vh;
background: rgba(#ffd900, 0.82);
}*/

.container2{
position: relative;
max-width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-rows: minmax(100px, auto);
margin: 40px;
grid-auto-flow: dense;
grid-gap: 10px;
}

.container2 .box{
background: #333;
padding: 20px;
display: grid;
font-size: 20px;
place-items: center;
text-align: center;
color: #fff;
transition: 0.5s;
}

.container2 .box:hover{
background: #1e82e9;
}

.container2 .box img{
position: relative;
max-width: 100px;
margin-bottom: 10px;
}

.container2 .box:nth-child(1){
grid-column: span 2;
grid-row: span 1;
}


.container2 .box:nth-child(2){
grid-column: span 1;
grid-row: span 2 ;
}

.container2 .box:nth-child(4){
grid-column: span 1;
grid-row: span 2;
}

.container2 .box:nth-child(5){
grid-column: span 3;
grid-row: span 1;
}

@media (max-width: 778px){
 .container2{
   grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
      grid-template-rows: minmax(auto, auto);
  }
  .container2 .box{
grid-column: unset !important;
grid-row: unset !important;
}

}