.projects{
  display: grid;
  grid-template-columns: 100%;
  gap: 2rem;
  justify-items: center;
}
@media all and (min-width: 700px){
  .projects{
    grid-template-columns: repeat(2, calc(50% - 1rem));
  }
  .projects--small .project-teaser:nth-child(2n){
    transform: translateY(50px);
  }
  .projects--large .project-teaser:nth-child(2n){
    transform: translateY(50%);
  }
}