.counterpart-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  background: none;
  border: 0;
}

.counterpart-house {
  overflow: hidden;
  border: 1px solid #dec4dd36;
  background: linear-gradient(145deg, #18132d, #252144);
}

.house-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid #ffffff20;
  background: linear-gradient(100deg, #2c1d43, #1a2d53);
}

.house-heading > span {
  color: #efb5d9;
  font: 50px Georgia, serif;
  text-shadow: 0 0 22px #e779bb70;
}

.house-heading small {
  display: block;
  color: #cdb4cd;
  font-size: 7px;
  letter-spacing: .15em;
}

.house-heading h2 {
  margin: 2px 0 0;
  font: 34px var(--display);
}

.house-heading b {
  margin-left: auto;
  color: #efb5d9;
  font-size: 7px;
  letter-spacing: .16em;
}

.counterpart-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.counterpart-grid .counterpart-pair article {
  min-height: 350px;
  padding: 28px 24px;
}

.counterpart-pair article + article {
  border-left: 1px solid #ffffff20;
}

.counterpart-grid .counterpart-pair article > small {
  margin-top: 0;
}

.counterpart-grid .counterpart-pair h3 {
  margin: 12px 0;
  font: 32px var(--display);
}

.counterpart-grid .counterpart-pair article > div {
  right: 24px;
  left: 24px;
}

.counterpart-pair article:nth-child(2) {
  background: linear-gradient(145deg, #20162e, #342142);
}

@media (max-width: 1050px) {
  .counterpart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .counterpart-pair { grid-template-columns: 1fr; }
  .counterpart-pair article + article { border-top: 1px solid #ffffff20; border-left: 0; }
  .counterpart-grid .counterpart-pair article { min-height: 320px; }
  .house-heading { padding: 18px; }
  .house-heading > span { font-size: 42px; }
}