:root {
  --archive-project-page-sidebar-display: block;
  --archive-project-project-list-margin-top: var(--layout-gap-basis);
  --archive-project-project-list-margin-bottom: calc(
    var(--layout-gap-basis) * 1.5
  );
  --archive-project-project-list-margin-bottom-as-last-child: var(
    --archive-project-project-list-margin-bottom
  );
}

/*
 * M Media Query (768px)
 * Target: 1023px > 768px
 * Test Resolution: 768 x 1024
 */
@media screen and (max-width: 1023px) {
  :root {
    --archive-project-project-list-margin-bottom: var(--layout-gap-basis);
    --archive-project-project-list-margin-bottom-as-last-child: 0;
  }
}

/*
 * S Media Query (640px)
 * Target: < 767px
 * Test Resolution: 390 x 844
 */
@media screen and (max-width: 767px) {
  :root {
    --archive-project-page-sidebar-display: none;
    --archive-project-project-list-margin-top: 2.5rem;
    --archive-project-project-list-margin-bottom: 2.5rem;
  }
}

.archive-project-page-sidebar {
  display: var(--archive-project-page-sidebar-display);
  margin-top: var(--project-list-item-padding-y);
}

.archive-project-project-list {
  margin-top: var(--archive-project-project-list-margin-top);
  margin-bottom: var(--archive-project-project-list-margin-bottom);
}

.archive-project-project-list:last-child {
  margin-bottom: var(
    --archive-project-project-list-margin-bottom-as-last-child
  );
}