/* --- Breakpoint para tablets e desktop ----- */

@media screen and (min-width: 798px) {
  
  nav {
    height: 100%;
    display: grid;
    grid-template-columns: auto auto 1fr; 
    gap: 4rem; 
    align-items: center; 

    border-radius: 0 0rem 1.6rem 1.6rem;
    box-shadow: 0 2px 8px var(--purple-900);
    padding: 2.5rem 4rem;
  }

  nav .btnStart {
    justify-self: end;
  }

  .nav-list li a {
    padding-block: 1px;
    position: relative;
  }

  .nav-list li a::after {
   content: '';
   width: 0%;
   height: 3px;
   background-color: var( --purple-500);
   position: absolute;
   left: 0;
   bottom: -6px;

   transition: 0.5s;
  }

  .nav-list li a:hover::after {
    width: 100%;
  }

  /* -------- Botão de voltar para o topo -------  */
  .btnGoTop {
    padding: 1.5rem 2rem;
  }

  /* -------- Conteúdo primário ------------  */
  section:first-child {
    max-width: 1280px;
    display: grid;
    grid-template-columns: 1fr 1fr; 
    max-height: 100%;
    align-items: stretch;
    gap: 1.6rem;
    padding: 10rem 0 0;

    margin: auto;
  }

  section.pageMain {
    padding: 8rem 0 0;
  }
  
  .left-content {
    align-self: center;
    gap: 1.6rem;
    padding: 1.6rem;
    margin-top: -12rem;
  }

  .left-content h1 {
    font-size: 3.2rem;
  }

  .left-content h2 {
    font-size: 2.4rem;
  }

  .left-content p {
    font-size: 1.6rem;
  }
  
  .right-content {
    display: flex; 
    justify-content: flex-end;
    height: 100%;
  }
  
  .right-content img {
    max-width: 60rem;
    height: auto;
    object-fit: contain;
  }

 /* ---- Conteúdo secundário -----  */
  section:not(:first-of-type) {
    padding: top 3.6rem;
  }

  .titleSection {
    font-size: 3.6rem;
  }

  section.main-content {
    padding: 3.6rem 4rem;
  }

  /* ------- footer -------  */
  footer {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: auto auto auto;
    justify-items: center;
    grid-gap: 1.6rem; 
    width: 100%; 

    margin-top: 11.2rem;
  }
  
  footer div {
    padding: 3.6rem 10rem;
  }
  
  footer .about {
    grid-column: 1; 
  }
  
  footer .thanks {
    grid-column: 2; 
  }
  
  footer .contact {
    justify-self: baseline;
  }
  
  footer hr {
    grid-column: 1 / -1; 
  }
  
  footer .copyright {
    grid-column: 1 / -1; 
    padding: 1rem;
    text-align: center; 
  }
}