.section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.section--plane {
  background: var(--color-surface-plane);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--space-3xl);
  text-align: center;
}

.section__head--side {
  align-self: start;
  position: sticky;
  top: calc(var(--size-header) + var(--space-xl));
  margin: 0;
  text-align: left;
}

.section__eyebrow {
  color: var(--color-accent);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  line-height: var(--text-eyebrow-line);
  letter-spacing: var(--text-eyebrow-tracking);
}

.section__title {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-line);
  letter-spacing: var(--text-h2-tracking);
  text-wrap: balance;
}

.section__lead {
  color: var(--color-text-secondary);
  font-size: var(--text-lead-size);
  font-weight: var(--text-lead-weight);
  line-height: var(--text-lead-line);
  letter-spacing: var(--text-lead-tracking);
  text-wrap: pretty;
}

@media (max-width: 1024px) {
  .section__head {
    margin-bottom: var(--space-2xl);
  }

  .section__head--side {
    position: static;
    margin-bottom: var(--space-lg);
  }
}