/* CSS, va de amigo: no estas bien estructurado */



/* Soy el chico de los botones, soy la manteca sacrificial */

.button {
  border: none;
  color: white;
  padding: 16px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  width: calc(100% - 0px);
}

.button1 {
  background-color: #307e9c;
  color: white;
  border: 2px solid white;
}

.button1:hover {
  background-color: #76b7d0;
  color: white;
}

.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008cba;
}

.button2:hover {
  background-color: #76b7d0;
  color: white;
}

/*---*/

.item1 {
  grid-area: head;
}

.item2 {
  grid-area: logo;
}

.item3 {
  grid-area: link;
}

.item4 {
  grid-area: main;
}

.item5 {
  grid-area: spon;
}

.item6 {
  grid-area: pack;
}

.item7 {
  grid-area: info;
}

.item8 {
  grid-area: cnls;
}

.item9 {
  grid-area: dscl;
}

.item10 {
  grid-area: thnk;
}

.grid-container {
  display: grid;
  grid-template-columns: 35% 35% auto;
  grid-template-areas:
    "head head head"
    "logo logo logo"
    "link main spon"
    "link pack spon"
    "info cnls thnk"
    "dscl dscl dscl";
     gap: 10px;
  background-color: transparent;
  /*color del contenedor*/
  padding: 5px;
}

.grid-container > div {
  background-color: rgb(171 216 233 / 0.7);
  /*color de fondo de la grilla*/
  text-align: justify;
  padding: 10px 5%;
  font-size: 25px;
  color: #21359d;
}

/* varia */
div.item2 {
  background-color: transparent;
}

p.item8 {
  font-size: 10px;
}

h4.item8 {
  font-size: 10px;
}

.grid-container > p {
  text-align: justify;
}