* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: rgb(168,182,144);
  font-family: Arial, Helvetica, sans-serif;
  color:white;
}
.gridcontainer {
  display: grid;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-content: center;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
.lampada {
  grid-column:8/11;
  grid-row:2/5;
  background-image: url("lampada.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.texto {
  grid-column:3/7;
  grid-row:3/5;
  text-align: left;
}
.logo {
  grid-column:3/7;
  grid-row:6/7;
  background-image: url("logo.PNG");
  background-size: auto 90%;
  background-repeat: no-repeat;
  background-position: left;
}
.facebook {
  grid-column:8/9;
  grid-row:6/7;
  background-image: url("facebook.svg");
  background-size: auto 40%;
  background-repeat: no-repeat;
  background-position: center;
}
.instagram {
  grid-column:9/10;
  grid-row:6/7;
  background-image: url("instagram.svg");
  background-size: auto 40%;
  background-repeat: no-repeat;
  background-position: center;
}
.linkedin {
  grid-column:10/11;
  grid-row:6/7;
  background-image: url("linkedin.svg");
  background-size: auto 40%;
  background-repeat: no-repeat;
  background-position: center;
}
.remate {
  grid-column:1/13;
  grid-row:6/7;
  background-color: white;
}
@media (max-width: 768px) {
  .gridcontainer {
    display: grid;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-content: center;
    grid-template-columns: repeat(5, 20vmin);
    grid-template-rows: repeat(7, 1fr);
  }
  .lampada {
    grid-column:2/5;
    grid-row:2/4;
    background-image: url("lampada.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .texto {
    grid-column:1/6;
    grid-row:4/5;
    text-align: center;
  }
  .logo {
    grid-column:2/5;
    grid-row:6/7;
    background-image: url("logo.PNG");
    background-size: auto 90%;
    background-repeat: no-repeat;
    background-position: center;
  }
  .facebook {
    grid-column:2/3;
    grid-row:7/8;
    background-image: url("facebook.svg");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
  }
  .instagram {
    grid-column:3/4;
    grid-row:7/8;
    background-image: url("instagram.svg");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
  }
  .linkedin {
    grid-column:4/5;
    grid-row:7/8;
    background-image: url("linkedin.svg");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
  }
  .remate {
    grid-column:1/6;
    grid-row:6/8;
    background-color: white;
  }
}
.instagram:hover {
  background-color: rgb(233, 233, 233);
}
.facebook:hover {
  background-color: rgb(233, 233, 233);
}
.linkedin:hover {
  background-color: rgb(233, 233, 233);
}