@media (max-width: 1280px) {
  html {
    --gs-1: 1fr;
    --gs-2: repeat(2, 1fr);
    --gs-3: repeat(3, 1fr);
    --gs-4: repeat(6, 1fr);
  }
  main > section {
    grid-column: 3/-1;
  }
  .overlay-grid div:nth-child(n + 7) {
    display: none;
  }
}

@media (max-width: 1024px) {
  html {
    --gs-1: 1fr;
    --gs-2: 1fr;
    --gs-3: 1fr 1fr;
    --gs-4: repeat(3, 1fr);
  }
  main > section,
  .test-wrapper {
    grid-column: 2/-1;
  }
  .overlay-grid div:nth-child(n + 4) {
    display: none;
  }
.overlay-grid span {
  transition-delay: calc(var(--i) * .1s);
}
article.work-preview .img-wrapper {
  aspect-ratio:  5/4;
}
}

@media (max-width: 768px) {
}

@media (max-width: 500px) {
  html {
    --gs-1: 1fr;
    --gs-2: 1fr;
    --gs-3: 1fr;
    --gs-4: repeat(2, 1fr);
  }
  main > section,
.test-wrapper  {
    grid-column: 1/-1;
  }
  .overlay-grid div:nth-child(n + 3) {
    display: none;
  }
  .nav-mobile {
    opacity: 1;
    z-index: 1;
    pointer-events: all;
  }
  nav ul {
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    inset: 0;
    gap: .5em;
    transition: opacity var(--transition);
  max-width:none;
  }
body.menu-active nav li {
  animation: slideIn var(--transition) forwards;
  opacity: 0;
  transform: translateY(25px);
  animation-delay: calc(var(--i) * .025s);
}

@keyframes slideIn {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
  nav li a {
    font-size: var(--fs-3);
  }
  body.menu-active nav ul {
    display: flex;
    opacity: 1;
    pointer-events: all;
  }
  .btn-setting.overlay-toggle span:first-child {
    transform: rotate(0) translateY(-5px);
  }
  .btn-setting.overlay-toggle span:last-child {
    transform: rotate(0) translateY(5px);
  }
  .intro-options {
    padding-right: 1rem;
}
}

@media (min-width: 768px) {
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}