.HeadlineContainer {
  display: flex;
}

.HeadlineContainer-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 6px 0;
}

.HeadlineContainer.has-Border .HeadlineContainer-content {
  border-bottom: 2px solid var(--clr-primary);
  border-bottom: 2px solid var(--headline-borderColor, var(--clr-primary));
}

.HeadlineContainer[\:has\(.Headline--white\)] .HeadlineContainer-content {
  --headline-borderColor: #ffffff;
}

.HeadlineContainer:has(.Headline--white) .HeadlineContainer-content {
  --headline-borderColor: #ffffff;
}

.HeadlineContainer[\:has\(.Headline--black\)] .HeadlineContainer-content {
  --headline-borderColor: var(--clr-primary);
}

.HeadlineContainer:has(.Headline--black) .HeadlineContainer-content {
  --headline-borderColor: var(--clr-primary);
}

.HeadlineContainer[\:has\(.Headline--green\)] .HeadlineContainer-content {
  --headline-borderColor: var(--font-clr-primary);
}

.HeadlineContainer:has(.Headline--green) .HeadlineContainer-content {
  --headline-borderColor: var(--font-clr-primary);
}

:where(.HeadlineContainer--left) {
  justify-content: flex-start;
}

:where(.HeadlineContainer--left) :where(.HeadlineContainer-content) {
    text-align: left;
  }

:where(.HeadlineContainer--center) {
  justify-content: center;
}

:where(.HeadlineContainer--center) :where(.HeadlineContainer-content) {
    text-align: center;
  }

:where(.HeadlineContainer--right) {
  justify-content: flex-end;
}

:where(.HeadlineContainer--right) :where(.HeadlineContainer-content) {
    text-align: right;
  }