.beyond {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}

.by-project,
.by-side { grid-column: 1 / -1; min-width: 0; }
.by-side { display: grid; grid-template-rows: auto 1fr; gap: var(--gap); }
.by-heading { display: flex; align-items: center; gap: calc(var(--gap) / 2); min-width: 0; color: var(--ink-3); }

.by-project {
  display: flex;
  flex-direction: column;
  border-left: 3px solid var(--cat);
  background: color-mix(in srgb, var(--cat) 6%, var(--surface));
  overflow-wrap: anywhere;
}
.by-project .card__head { align-items: flex-start; flex-wrap: wrap; }
.by-project__title { font-size: var(--fs-xl); line-height: 1.25; letter-spacing: -0.02em; }
.by-project__text { margin-top: calc(var(--gap) / 2); color: var(--ink-2); }
.by-project__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-block: var(--pad);
}
.by-fact { min-width: 0; }
.by-fact__value { display: block; color: var(--cat); font-size: var(--fs-xl); font-weight: 750; line-height: 1.1; }
.by-fact__label {
  display: block;
  margin-top: calc(var(--gap) / 3);
  color: var(--ink-3);
  font-size: var(--fs-xs);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.by-project__links { display: flex; flex-wrap: wrap; gap: calc(var(--gap) / 2); margin-top: auto; }
.by-project__links .btn { min-height: 40px; }

.by-os__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--gap) / 2);
  min-height: 40px;
  padding-block: calc(var(--gap) / 2);
}
.by-os__row + .by-os__row { border-top: 1px solid var(--line); }
.by-os__copy { min-width: 0; }
.by-os__note { margin-top: calc(var(--gap) / 4); color: var(--ink-2); font-size: var(--fs-sm); }

.by-interests__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.by-interest { display: flex; align-items: flex-start; gap: calc(var(--gap) / 2); min-width: 0; }
.by-interest__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
}
.by-interest__copy { min-width: 0; overflow-wrap: anywhere; }
.by-interest__text { margin-top: calc(var(--gap) / 4); color: var(--ink-2); font-size: var(--fs-sm); }

@media (min-width: 900px) {
  .beyond { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .by-project { grid-column: span 7; }
  .by-side { grid-column: span 5; }
}

@media (max-width: 480px) {
  .by-interests__grid { grid-template-columns: minmax(0, 1fr); }
}