.projects-with-filter {
  --gap: 8.5333333333vw;
}
@media (min-width: 720px) {
  .projects-with-filter {
    --gap: 3.125vw;
  }
}
@media (min-width: 1281px) {
  .projects-with-filter {
    --gap: 2.0833333333vw;
  }
}
@media (min-width: 2400px) {
  .projects-with-filter {
    --gap: 50px;
  }
}
.projects-with-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--gap);
}
.projects-with-filter__projects {
  --width: 100%;
  --row-gap: 0vw;
}
@media (min-width: 720px) {
  .projects-with-filter__projects {
    --width: 100%;
  }
}
@media (min-width: 720px) {
  .projects-with-filter__projects {
    --row-gap: 0vw;
  }
}
@media (min-width: 1281px) {
  .projects-with-filter__projects {
    --width: 84.8958333333vw;
  }
}
@media (min-width: 1281px) {
  .projects-with-filter__projects {
    --row-gap: 2.9166666667vw;
  }
}
@media (min-width: 2400px) {
  .projects-with-filter__projects {
    --width: 2037.5px;
  }
}
@media (min-width: 2400px) {
  .projects-with-filter__projects {
    --row-gap: 70px;
  }
}
.projects-with-filter__projects {
  width: var(--width);
  display: flex;
  flex-direction: column;
  align-items: center;
}