/* Section: What Ponta is (#what-ponta-is). Two product cards and the "integration layer" band.
   Independent of the other sections. Needs section-base.css. */

.wpi__grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 800px) { .wpi__grid { grid-template-columns: 1fr 1fr; } }

.wpi__card { display: flex; flex-direction: column; }
.wpi__art { padding: var(--s-4) var(--s-5) 0; }
.wpi__body { padding: var(--s-6); display: flex; flex-direction: column; flex: 1; }
.wpi__tag { margin: var(--s-2) 0 0; color: var(--t-body); font-size: var(--fs-body); line-height: 1.4; }
.wpi__body .card__text { font-size: var(--fs-body); }

.wpi__band {
  display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-5);
  padding: var(--s-5) var(--s-6);
}
.wpi__band p { margin: 0; color: var(--t-2); }
.wpi__band strong { color: var(--t-body); }
.wpi__chain { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.wpi__chain i { display: block; width: 28px; border-top: 1px dashed rgba(255, 255, 255, 0.3); }
@media (max-width: 719.98px) {
  .wpi__band { flex-direction: column; align-items: flex-start; gap: var(--s-4); padding: var(--s-5); }
  .wpi__body { padding: var(--s-5); }
}