/*
 * Original Design Specifications
 * Target: > 1800px
 * Test Resolution: 1920 x 1080
 */
:root {
  --single-project-team-gap: 2.5rem;
  --single-project-team-group-title-margin-bottom: 2rem;
  --single-project-team-columns: 2;
  --single-project-project-team-margin-bottom: 0rem;
}

/*
 * M Media Query (768px)
 * Target: 1023px > 768px
 * Test Resolution: 768 x 1024
 */
@media screen and (max-width: 1023px) {
  :root {
    --single-project-team-columns: 1;
    --single-project-team-gap: 1.5rem;
  }
}

/*
 * S Media Query (640px)
 * Target: < 767px
 * Test Resolution: 390 x 844
 */
@media screen and (max-width: 767px) {
  :root {
    --single-project-team-group-title-margin-bottom: 1rem;
    --single-project-project-team-margin-bottom: 4rem;
  }
}

.single-project-project-team {
  display: grid;
  grid-template-columns: repeat(var(--single-project-team-columns), 1fr);
  column-gap: var(--single-project-team-gap);
  row-gap: calc(var(--single-project-team-gap) * 2);
  margin-bottom: var(--single-project-project-team-margin-bottom);
}

.single-project-project-team-group {
  flex: 1 0 0;
}

.single-project-project-team-group-title {
  margin-bottom: var(--single-project-team-group-title-margin-bottom);
}