body {
  height: 100%;
  background: #d8d8d8;
}

#container {
  margin: auto;
  justify-content: center;
  padding: 2rem 0px;
  width: fit-content;
  height: min-content;
  /* background-color: rgb(204, 101, 101); */
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 190px));
  grid-template-rows: repeat(6, minmax(0, 190px));
}

#container > * {
  background-color: darkgray;
  border: 0px black solid;
  border-radius: 16px;
}

#about-me {
  grid-row-start: span 2;
  grid-column-start: span 3;
}

#projects {
  grid-row-start: span 2;
  grid-column-start: span 3;
}

#tecnologias {
  grid-row-start: span 2;
  grid-column-start: span 2;
}

@media (min-width: 0px) and (max-width: 1024px) {
  #container {
    grid-template-rows: repeat(6, minmax(0, 180px));
    padding: 2rem 2rem;
  }
  #about-me {
    grid-row-start: span 2;
    grid-column-start: span 4;
  }

  #projects {
    grid-row-start: span 2;
    grid-column-start: span 4;
  }

  #tecnologias {
    grid-row-start: span 2;
    grid-column-start: span 2;
  }

  #linkedin {
    grid-column: 4;
    grid-row: -5;
  }

  #container {
    height: min-content;
    min-width: 600px;
  }
}