.section-heading {
  display: flex;
  align-items: center;
  gap: var(--space-40);
  margin-bottom: var(--space-40);
}

.section-heading::before,
.section-heading::after {
  flex: 1 1 0;
  height: 1px;
  background: var(--color-decoration-accent);
  content: "";
  animation: section-heading-line-enter 900ms cubic-bezier(.16, 1, .3, 1) 120ms both;
  will-change: opacity, transform;
}

.section-heading::before {
  transform-origin: right center;
}

.section-heading::after {
  transform-origin: left center;
}

@keyframes section-heading-line-enter {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

.section-heading h2 {
  flex: 0 0 auto;
  font-size: var(--font-size-36);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-54);
  animation: section-heading-title-enter 720ms cubic-bezier(.16, 1, .3, 1) both;
  will-change: opacity, transform;
}

@keyframes section-heading-title-enter {
  from {
    opacity: 0;
    transform: translateY(var(--space-16));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .section-heading {
    gap: var(--space-24);
    margin-bottom: var(--space-24);
  }

  .section-heading h2 {
    font-size: var(--font-size-24);
    line-height: var(--line-height-32);
  }
}

@media (max-width: 767px) {
  .section-heading {
    gap: var(--space-24);
    margin-bottom: var(--space-20);
  }

  .section-heading h2 {
    font-size: var(--font-size-24);
    line-height: var(--line-height-32);
  }
}