@layer components {
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }

  .header__text-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);

    h1 {
      font-size: var(--font-size-lg-x5);
      font-weight: var(--font-weight-boldest);
      color: var(--color-primary-6);
    }

    p {
      font-weight: var(--font-weight-normal);
      line-height: var(--line-height-loosest);
      color: var(--color-primary-8);
    }
  }

  .header__subtitle-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  /* break-sm-x1: 40rem (640px) */
  @media (width >=40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >=48rem) {
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >=64rem) {
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >=80rem) {
  }
}