#servicos{
  display: flex;

  flex-direction: column;
  align-items: center;
}

#servicos > div{
  width: min(1200px, 90%);
  margin: 30px 0;
}

#servicos-title{
  text-align: center;
}

#servicos-title h2{
  font-size: 1.5em;
}

#servicos-title p{
  margin: 15px 0;
}

#servicos-grid{
  width: 100%;

  display: flex;
  flex-wrap: wrap;

  justify-content: center;

  gap: 30px;
}

#servicos-grid article{
  flex: 1 1 300px;
  max-width: 350px;

  padding: 25px 15px;

  display: flex;
  flex-direction: column;

  row-gap: 20px;

  border: 1px solid var(--color1);
  border-radius: 15px;

  box-shadow: 5px 5px 8px black;

  background-color: var(--background-secondary-color);

}

#servicos-grid h3{
  font-size: 1.3em;
}

#servicos-grid article > div{
  text-align: center;
}

#servicos-grid a{
  max-width: 70%;
  text-decoration:underline;
}

#servicos-grid img{
  width: 20px;
  height: 24px;

  margin-top: auto;
}

@media screen and (min-width:769px) {
  #servicos-grid article{
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: rgba(255, 255, 255, 0.7);
  }

  #servicos-grid article:hover{
    transform: scale(1.1);
    box-shadow: 0px 0px 5px 1px white;
    border: 1px solid var(--color1);
    color: var(--text-color);
  }

  #servicos-grid a{
    color: rgba(255, 255, 255, 0.7);
  }

  #servicos-grid a:hover{
    color: var(--color1);
  }
}