.columns {
  display: grid;
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}

.columns section {
  display: grid;
  gap: var(--space-large);
  margin-inline: auto;
  position: relative;
  width: min(100%, 35em);
}

.columns section header {
  display: grid;
  gap: var(--space-neutral);
  text-align: center;
}

.columns section header h1 {
  font-size: var(--font-size-x-large);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-x-tight);
  line-height: 1.15;
  margin-bottom: -0.175em;
  margin-top: -0.4375em;
}

.columns section header br {
  display: none;
}

.columns section article {
  display: grid;
  gap: 1.75em;
}

.columns section article div {
  align-content: start;
  display: grid;
  flex: 1;
  font-size: var(--font-size-x-small);
  letter-spacing: var(--letter-spacing);
  line-height: var(--space-neutral);
  margin-bottom: -0.325em;
  margin-top: -0.5625em;
}

.columns section article div dl {
  --flow-space: 0;
  align-items: start;
  background: url('/assets/images/general/jf-signature.svg') left top/auto 2.325em no-repeat;
  display: flex;
  flex-direction: column;
  font-size: 85%;
  letter-spacing: var(--letter-spacing-loose);
  line-height: var(--space-neutral);
  margin-left: -0.6em;
  margin-top: 1.175em;
  padding-top: 2.575em;
}

.columns section article div dl dt,
.columns section article div dl dd {
  margin-left: 0.6em;
}

.columns section article div > * + * {
  padding-top: var(--flow-space, var(--space-neutral));
}



@media(min-width: 48em) {

  .columns section header br {
    display: inline;
  }

  .columns section article {
    display: flex;
    gap: var(--space-large);
  }

}



@media(min-width: 64em) {

  .columns {
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }

}