.block-new-event-details .details-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: 16px;
  padding: 80px 16px 40px;
  box-sizing: border-box;
  width: 100%;
  text-align: left;
}
.block-new-event-details .details-info {
  grid-column: 2 / 4;
  display: flex;
  flex-direction: column;
}
.block-new-event-details .details-line {
  font: var(--body2);
  border-top: 1px solid currentColor;
  padding: 16px 0;
}
.block-new-event-details .details-members {
  grid-column: 5 / 9;
  display: flex;
  flex-direction: column;
  width: calc(100% + 16px);
  margin-right: -16px;
  border-bottom: 1px solid currentColor;
}
.block-new-event-details .member-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 16px;
  align-items: center;
  border-top: 1px solid currentColor;
  padding: 16px 0;
}
.block-new-event-details .member-name {
  font: var(--h2);
  margin: 0;
}
.block-new-event-details .member-instrument {
  font: var(--body2);
}
.block-new-event-details.details-style-jct {
  background: var(--jct-white);
  color: var(--jct-black);
}
.block-new-event-details.details-style-flame {
  background: var(--fj-brown);
  color: var(--fj-orange);
}
.block-new-event-details.details-style-tjo {
  background: var(--tjo-blue);
  color: var(--jct-black);
}
.block-new-event-details.details-style-tjf {
  background: var(--tjo-lightblue);
  color: var(--tjo-olive);
}
.block-new-event-details.details-style-flame .member-name,
.block-new-event-details.details-style-tjo .member-name {
  color: var(--jct-white);
}
@media (max-width: 768px) {
  .block-new-event-details .details-grid {
    grid-template-columns: repeat(4, 1fr);
    padding: 40px 16px 16px;
    row-gap: 40px;
  }
  .block-new-event-details .details-info {
    grid-column: 1 / 3;
    grid-row: 1;
    margin-top: -40px;
  }
  .block-new-event-details .details-line {
    font: var(--body4);
  }
  .block-new-event-details .details-members {
    grid-column: 1 / 5;
    grid-row: 2;
  }
  .block-new-event-details .member-row {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 16px;
    box-sizing: border-box;
    padding-right: 16px;
  }
  .block-new-event-details .member-name {
    grid-column: 1 / 5;
    grid-row: 1;
    text-align: left;
    font: var(--h3);
  }
  .block-new-event-details .member-instrument {
    grid-column: 4 / 5;
    grid-row: 2;
    text-align: right;
    font: var(--body3);
  }
}