/* Większe ekrany (mobile first) oraz ograniczenie ruchu. */

@media (min-width: 640px) {
  :root {
    --gutter: 2rem;
    --section-space: 6rem;
  }

  .form {
    padding: 2rem;
  }

  .form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--services,
  .grid--projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
  }

  .footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  :root {
    --nav-height: 84px;
    --section-space: 7.5rem;
  }

  .nav__logo {
    height: 60px;
  }

  .js .nav__toggle,
  .nav__toggle {
    display: none;
  }

  .nav__menu,
  .js .nav__menu {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    align-items: center;
    gap: 2rem;
    padding-bottom: 0;
  }

  .nav__menu .btn {
    margin-top: 0;
  }

  .hero {
    min-height: 44rem;
  }

  .hero__content {
    padding-block: 8rem 6rem;
  }

  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
  }

  .split--contact {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }

  .grid--services,
  .grid--projects {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .footer__inner {
    grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding-block: 5rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .hero__media {
    transform: none !important;
  }

  .btn:hover,
  .project-card:hover .project-card__media img {
    transform: none;
  }
}