.bi-intro-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px 0px;
}

.bi-intro-card {
  flex: 1 1 250px;
  max-width: 250px;
}

.bi-intro-card__image {
  width: 100%;
  height: auto;
}

.bi-intro-lead {
  font-size: var(--rg-font-size-heading-md);
  text-align: center;
  font-weight: var(--rg-font-weight-semibold);
  margin-top: 30px;
}

.bi-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.bi-text {
  flex: 1 1 300px;
}

.bi-title {
  font-size: var(--rg-font-size-body-lg);
  font-weight: var(--rg-font-weight-semibold);
  line-height: 4vh;
}

.bi-section__visual {
  flex: 0 0 auto;
}

.bi-section__image {
  flex: 0 0 auto;
  max-width: 450px;
  width: 100%;
  height: auto;
}

.bioinformatics-preview {
  padding-top: 50px;
  padding-bottom: 100px;
}

.bi-preview-image--height-300 {
  height: 300px;
}

.bi-preview-image--height-450 {
  height: 450px;
}

.bi-preview-image--wide {
  width: 100%;
  height: auto;
  display: block;
}

.bi-preview-image--max-700 {
  max-width: 700px;
}

.bi-preview-image--max-650 {
  max-width: 650px;
}

.bi-preview-image--compact {
  max-height: 180px;
  margin: auto;
}

@media (max-width: 768px) {
  .bi-intro-cards {
    flex-direction: column !important;
    align-items: center;
  }

  .bi-section {
    flex-direction: column-reverse;
    text-align: center;
  }

  .bi-text {
    width: 100%;
  }
}