p {
  font-size: 14pt;
  margin: 0.5rem 0rem;
}

ul {
  font-size: 14pt;
  margin-left: 1rem;
}

#hero {
  display: grid;
  min-height: 500px;
  max-width: 1200px;
  padding: 4rem 1rem;
  justify-self: center;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "text image";
  justify-content: center;
  margin-top: var(--nav-height);
}

#hero-text {
  display: grid;
  align-self: center;
  justify-self: center;
  grid-area: text;
}

#hero-title {
  color: var(--text-dark);
  font-size: 24pt;
}

#hero-subtitle {
  align-self: center;
  justify-self: center;
  color: var(--text-light);
  margin-top: 1rem;
}

#hero-supertitle {
  align-self: center;
  color: var(--accent);
  margin-top: 1rem;
  font-size: 12pt;
  margin-bottom: 0.5rem;
}

#hero-img {
  max-width: 600px;
  justify-self: center;
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-area: image;
}

#hero-img img {
  width: 100%;
}

/**************************/
/* PERCHé UN SITO VETRINA */
/**************************/

#why {
  display: grid;
}
#why-grid {
  max-width: 1200px;
  justify-self: center;
  padding: 4rem 0.5rem;
  display: grid;
  border-top: 1px solid var(--rule);
}

#why-supertitle {
  align-self: center;
  color: var(--accent);
  margin-top: 1rem;
  font-size: 12pt;
  margin-bottom: 0.5rem;
}

#why-title {
  margin-bottom: 1rem;
  justify-self: start;
  border-bottom: 2px solid var(--red-1);
  color: var(--text-dark);
}

/********************/
/* LA MIA SOLUZIONE */
/********************/

#solution {
  display: grid;
}
#solution h3 {
  color: var(--accent);
  font-weight: normal;
  font-size: 12pt;
  margin: 0.5rem 0rem;
}
#solution-grid {
  max-width: 1200px;
  justify-self: center;
  padding: 4rem 0.5rem;
  display: grid;
  border-top: 1px solid var(--rule);
}

#solution-supertitle {
  align-self: center;
  color: var(--accent);
  margin-top: 1rem;
  font-size: 12pt;
  margin-bottom: 0.5rem;
}

#solution-title {
  margin-bottom: 0.5rem;
  justify-self: start;
  border-bottom: 2px solid var(--red-1);
  color: var(--text-dark);
}

/********************/
/* TIPI DI BUSINESS */
/********************/

#businesses {
  display: grid;
}
#businesses h3 {
  color: var(--accent);
  font-weight: normal;
  font-size: 12pt;
  margin: 0.5rem 0rem;
}
#businesses-grid {
  max-width: 1200px;
  justify-self: center;
  padding: 4rem 0.5rem;
  display: grid;
  border-top: 1px solid var(--rule);
}

#businesses-supertitle {
  align-self: center;
  color: var(--accent);
  margin-top: 1rem;
  font-size: 12pt;
  margin-bottom: 0.5rem;
}

#businesses-title {
  margin-bottom: 0.5rem;
  justify-self: start;
  border-bottom: 2px solid var(--red-1);
  color: var(--text-dark);
}

/************/
/* DETTAGLI */
/************/

#details {
  display: grid;
  background-color: white;
}
#details h3 {
  color: var(--accent);
  font-weight: normal;
  font-size: 12pt;
  margin: 0.5rem 0rem;
}
#details-grid {
  max-width: 1200px;
  justify-self: center;
  padding: 4rem 0.5rem;
  display: grid;
  border-top: 1px solid var(--rule);
}

#details-supertitle {
  align-self: center;
  color: var(--accent);
  margin-top: 1rem;
  font-size: 12pt;
  margin-bottom: 0.5rem;
}

#details-title {
  margin-bottom: 0.5rem;
  justify-self: start;
  border-bottom: 2px solid var(--red-1);
  color: var(--accent);
}

#contact-me-button {
  justify-self: center;
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--accent);
  border-radius: 0.3rem;
  border: 1px solid var(--rule);
  background-color: 1px solid var(--gradient-light);
  padding: 0.5rem 1rem;
  text-decoration: none;
}

#contact-me-button:visited {
  text-decoration: none;
}

@media (max-width: 900px) {
  #hero {
    margin-top: 0;
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "image";
  }

  #hero-title {
    justify-self: center;
  }
  #hero-supertitle {
    justify-self: center;
  }
  #hero-subtitle {
    justify-self: center;
  }
}