/* Databricks partner page.
   Body copy is set to 2.2rem to match the Intelligent Engineering page's
   .introduction-content rather than the 1.8rem global body size.
   The capability cards mirror that page's principle cards; #f8ebe9 is
   hardcoded because it lives in intelligent-engineering.css as
   --ie-color-light-coral, which is not enqueued here. */

.db-text {
  font-size: 2.2rem;
  line-height: 1.6;
  font-family: "mulishregular", sans-serif;
}

.db-principles {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem 5%;
  justify-content: center;
}

.db-principle-col {
  flex: 0 0 30%;
  max-width: 30%;
}

.db-principle-card {
  background: #f8ebe9;
  min-height: 18rem;
  width: 100%;
  padding: 3rem;
  border: 0;
  border-radius: 1rem;
  border-bottom: 1.65rem solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.db-principle-col:nth-child(1) .db-principle-card { border-bottom-color: var(--tertiary); }
.db-principle-col:nth-child(2) .db-principle-card { border-bottom-color: var(--secondary); }
.db-principle-col:nth-child(3) .db-principle-card { border-bottom-color: var(--quaternary); }
.db-principle-col:nth-child(4) .db-principle-card { border-bottom-color: var(--sky-blue); }
.db-principle-col:nth-child(5) .db-principle-card { border-bottom-color: var(--primary); }

.db-principle-title {
  color: #33357D;
  font-size: 2.2rem;
  font-family: "zilla_slabsemibold", serif;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

@media (max-width: 991px) {

  .db-principle-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}