$o-detail-intro-bp1: 686;
$o-detail-intro-bp2: 1100;

.o-project-info {
  @include template(list, review);
  @include vspacing('padding-bottom' 1);
  margin-top: space(6);
  display: grid;
  grid-row-gap: space(4);
  grid-column-gap: column(1,12);
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
      "list"
      "review";

  // Set side by side
  @include mq($o-detail-intro-bp1) {
    grid-template-columns: 3fr 9fr;
    grid-template-rows: auto; // reset needed
    grid-template-areas: "list review"
  }
  @include mq($o-detail-intro-bp2) {
    grid-template-columns: 3fr 2fr 6fr;
    grid-template-areas: ". list review"
  }
}


.o-project-info__title {
  @include font-weight('bold');
}


.o-project-info__list {
  list-style: none;
  margin-left: 0;
}


.o-project-info__item {
  color: palette(neutral, 500);

  &::before {
    content: "- ";
  }
}