section .section-container {
  max-width: var(--container-max);
  margin-inline: auto;
}

#home,
#about,
#skills,
#projects,
#contact {
  scroll-margin-top: 96px;
}

@media (max-width: 1024px) {
  .hero,
  .about,
  .skills,
  .projects,
  .certifications,
  .contact {
    padding-block: var(--section-pad-y);
  }

  body:not(.nav-drawer-open) #home.hero {
    padding-top: max(var(--header-height-tablet), 88px) !important;
  }

  #home,
  #about,
  #skills,
  #projects,
  #contact {
    scroll-margin-top: 92px;
  }
}

@media (max-width: 768px) {
  .hero,
  .about,
  .skills,
  .projects,
  .certifications,
  .contact {
    padding-block: var(--section-pad-y-sm);
  }

  body:not(.nav-drawer-open) #home.hero {
    padding-top: max(var(--header-height-mobile), 98px) !important;
  }

  .hero-container,
  .section-container {
    padding-inline: clamp(0.95rem, 3.8vw, var(--space-5));
  }
}

@media (max-width: 640px) {
  .hero,
  .about,
  .skills,
  .projects,
  .certifications,
  .contact {
    padding-block: var(--section-pad-y-xs);
  }

  .hero-container,
  .section-container {
    padding-inline: clamp(0.78rem, 4vw, var(--space-4));
  }
}