section {
  margin-top: var(--xxxl);
  padding-left: var(--xl);
  padding-right: var(--xl);
}

.line {
  h2,
  h3 {
    color: var(--color-blue-dark);
  }

  h2,
  h5 {
    display: flex;
    align-items: center;
    gap: var(--m);
  }

  h2::after {
    content: "";
    flex: 1;
    height: 4px;
    margin-right: calc(var(--xl) * -1);
    background-color: var(--color-blue-dark);
  }

  h5::after {
    content: "";
    flex: 1;
    height: 3px;
    margin-right: calc(var(--xl) * -1);
    background-color: var(--color-blue-light);
  }
}

.text-columns {
  display: flex;
  flex-direction: row;
  gap: var(--l);

  div {
    h4 {
      font-size: var(--fs-m);
      margin-top: var(--m);
    }

    p {
      font-size: var(--fs-xs);
      padding-top: var(--xxs);
    }
  }

  @media (max-width: 949px) {
    flex-direction: column;
    gap: var(--xs);
  }
}

.example-title {
  padding-bottom: var(--s);
}

.examples {
  display: flex;
  flex-direction: row;
  gap: 40px;

  h3 {
    margin-bottom: var(--s);
  }

  @media (max-width: 924px) {
    flex-direction: column;
    gap: var(--xl);
  }
}

.example {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: top; 
  text-align: center;
}

.info-link {
  display: inline-block;
  text-decoration: underline;
  color: var(--color-blue-dark);
  margin-top: var(--xs);
  margin-bottom: var(--m);
}

.info-section {
    margin-top: var(--m);
}

.next-principle-link {
    display: flex;
    justify-content: end;
    margin-right: var(--l);
    margin-top: var(--xxl);
    font-weight: var(--fw-semi-bold);
    text-decoration: underline;
    color: var(--color-blue-light)
}