/* assets/css/pages/index.css
   Homepage-only layout + project cards + CTA.
*/

main > section:first-of-type{
  padding-top: 16px;
  padding-bottom: 8px;
}

main > section:first-of-type h1{
  margin-top: 10px;
  margin-bottom: 12px;
}

main > section:first-of-type p{
  font-size: 1.05rem;
  color: var(--fg);
}

/* Projects section spacing */
#projects{
  padding-top: 10px;
}

#projects h1{
  text-align: center;
  margin-top: 10px;
  margin-bottom: 22px;
  letter-spacing: .02em;
}

/* Grid layout */
#projects .cards{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 560px){
  #projects .cards{ grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px){
  #projects .cards{ grid-template-columns: repeat(3, 1fr); }
  main > section:first-of-type h1{ font-size: 34px; }
}

/* "See All Projects" */
#projects a[href="/projects/"]{
  display: block;
  width: 100%;
  text-align: center;

  margin-top: 1.25rem;
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: .03em;

  text-decoration: none;
}

#projects a[href="/projects/"]:hover{
  opacity: .85;
}