@media (max-width: 1280px) {
  body {
    --gs-xl: repeat(5, 1fr);
    --gs-l: repeat(3, 1fr);
  }
  .overlay div:nth-child(n + 6) {
    display: none;
  }
  #philosophy .title {
    grid-column: 1/-1;
  }
  #references .title,
  #philosophy .message {
    grid-column: 2/-1;
  }
  .item-experience {
    grid-column: 1/-2;
  }
  #background .message {
    grid-column: 3/-1;
  }
  #work {
    grid-template-columns: 1fr;
  }

  #contact .info {
    max-width: 33%;
  }
  .illustration.one {
    right: 0;
    left: auto;
    bottom: -7.5%;
    width: clamp(154px, 14vw, 99999rem);
  }
  #intro,
#work,
#philosophy,
#experiences,
#references,
#thoughts,
#contact {
  margin-left: calc(var(--gap) * .25);
}
}

@media (max-width: 1024px) {
  body {
    --gs-xl: repeat(3, 1fr);
    --gs-l: repeat(2, 1fr);
  }
  .overlay div:nth-child(n + 4) {
    display: none;
  }
  #contact,
  .modal-content,
  main > section,
  footer,
  #background .message {
    grid-column: 2/-1;
  }
  #philosophy .message,
  .item-experience {
    grid-column: 1/-1;
  }
  .illustration.one {
    bottom: 5%;
    transform: rotate(10deg);
  }
  #intro,
#work,
#philosophy,
#experiences,
#references,
#thoughts,
#contact {
  margin-left: calc(var(--gap) * .35);
}
}

@media (max-width: 768px) {
  body {
    --gs-xl: repeat(2, 1fr);
    --gs-l: repeat(2, 1fr);

    --gap: clamp(0.5rem, 2.5vw, 100vw);
  }
  .overlay div:nth-child(n + 3) {
    display: none;
  }
  #contact,
  #references .title,
  main > section,
  footer,
  #project-modal > * {
    grid-column: 1/-1;
  }

  section#background {
    z-index: auto;
  }
  section#background::before,
  section#background::after {
    display: none;
  }
  .modal-close {
    left: auto;
    right: var(--gap);
  }

  .illustration.three {
    display: none;
  }
  .illustration.two {
    bottom: 62px;
  }
  .illustration.one {
    top: 20%;
    bottom: auto;
    right: -5%;
  }
  #work {
    gap: min(calc(var(--gap) * 2), 1.5rem);
  }
  nav {
    display: none;
  }
  #intro,
#work,
#philosophy,
#experiences,
#references,
#thoughts,
#contact {
  margin-left: var(--gap);
}
}

@media (max-width: 500px) {
  .intro-buttons {
    justify-content: center;
  }
  #background .message {
    grid-column: 1/-1;
  }
  .illustration.two {
    bottom: -60px;
    width: 100%;
  }
  #contact .info {
    max-width: 100%;
  }
  .illustration.one {
    right: -10%;
    top: 25%;
  }
}