/* ===== RESPONSIVE ===== */

/* ---- Mobile nav (< 1024px) ---- */
@media screen and (max-width: 1023px) {
  .nav_toggle,
  .nav_close {
    display: flex;
  }

  .nav_menu {
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: -100%;
    width: min(75%, 320px);
    height: 100%;
    background: hsla(222, 22%, 8%, 0.75);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border-left: 1px solid var(--nav-border);
    padding: 5rem 2.5rem 3rem;
    transition: inset-inline-end 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: var(--z-fixed);
  }

  .nav_menu.show_menu {
    inset-inline-end: 0;
  }

  .nav_list {
    flex-direction: column;
    row-gap: 2.5rem;
  }

  .nav_link {
    font-size: 1.1rem;
    color: var(--title-color);
  }

  .nav_close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    font-size: 1.5rem;
  }
}

/* ---- Small (≥ 480px) ---- */
@media screen and (min-width: 480px) {
  .home_description,
  .about_description,
  .skills_description {
    margin-inline: auto;
  }
}

/* ---- Tablet (≥ 700px) ---- */
@media screen and (min-width: 700px) {
  .home_container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .home_data { text-align: left; }
  .home_social { justify-content: flex-start; }
  .home_description { margin-inline: 0; }

  .home_image { order: 2; }

  /* About */
  .about_container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .about_data { text-align: left; order: 2; }
  .about_description { margin-inline: 0; }
  .about_image { order: 1; }

  /* Services */
  .services_container {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Projects */
  .projects_container {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Contact */
  .contact_group {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.25rem;
  }
}

/* ---- Desktop (≥ 1024px) ---- */
@media screen and (min-width: 1024px) {
  .section {
    padding-block: 8rem 3rem;
  }

  .home_container {
    grid-template-columns: 500px 1fr;
    column-gap: 5rem;
    min-height: 100dvh;
    padding-block: calc(var(--header-h) + 2rem) 4rem;
  }

  .home_blob {
    width: 480px;
  }

  /* Skills */
  .skills_container {
    grid-template-columns: 420px 1fr;
    column-gap: 5rem;
    align-items: start;
  }

  .skills_data { text-align: left; }
  .skills_description { margin-inline: 0; }

  .skills_content {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-content: start;
  }

  /* Services */
  .services_container {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
  }

  /* Projects */
  .projects_container {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Contact */
  .contact_container {
    max-width: 680px;
    margin-inline: auto;
  }

  .contact_form textarea {
    height: 14rem;
  }

  /* Footer */
  .footer_container {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: inherit;
  }

  .footer_copy {
    justify-self: end;
    margin-top: 0;
  }

  .footer_social {
    justify-self: center;
  }

  /* Scroll up */
  .scrollup {
    right: 2.5rem;
  }
}

/* ---- Wide (≥ 1440px) ---- */
@media screen and (min-width: 1440px) {
  .home_container {
    grid-template-columns: 560px 1fr;
    column-gap: 8rem;
  }

  .about_container {
    grid-template-columns: 1fr 540px;
    column-gap: 6rem;
  }
}