.apresentation {
  margin-top: 15rem;
}

.apresentation > .title {
  font-size: 3.3rem;

  color: var(--Dark-gray);

  text-align: center;
}

.apresentation > .description {
  width: 45%;

  text-align: center;

  margin: 2rem auto;

  font-size: 1.7rem;

  line-height: 3.5rem;

  color: var(--Light-gray);
}

.apresentation > .informations {
  display: flex;

  margin-top: 7rem;
}

.apresentation > .informations > img {
  width: 50%;
}

.apresentation > .informations > .itens {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.apresentation > .informations > .itens > .item {
  margin-left: 7rem;

  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.apresentation > .informations > .itens > .item > .subtitle {
  font-size: 3rem;

  color: var(--Dark-gray);
}

.apresentation > .informations > .itens > .item > .description {
  font-size: 1.7rem;

  width: 60%;

  line-height: 2.7rem;

  color: var(--Light-gray);
}

@media (max-width: 480px) {
  .apresentation {
    margin-top: 20rem;
  }

  .apresentation > .title {
    font-size: 3rem;
  }

  .apresentation > .description {
    width: 90%;

    line-height: 3rem;

    font-size: 1.5rem;
  }

  .apresentation > .informations {
    flex-direction: column;
    gap: 5rem;
  }

  .apresentation > .informations > img {
    width: 100%;
  }

  .apresentation > .informations > .itens {
    text-align: center;
  }
  
  .apresentation > .informations > .itens > .item {
    width: 100%;
    
    margin-left: 0;    
  }

  .apresentation > .informations > .itens > .item > .description {
    width: 100%;

    font-size: 1.5rem;

    margin-top: 0;
    
    line-height: 3rem;
  }
}