.text {
  container-type: inline-size;
  position: relative;
  text-align: var(--horizontal-alignment-text);
}

.text .text-inner {
  align-items: var(--horizontal-alignment-text);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-left: var(--space-small-breakpoint-container);
  margin-right: var(--space-small-breakpoint-container);
  padding: var(--space-y-small-breakpoint-text) var(--space-x-small-breakpoint-text);
  position: relative;
}

@media(min-width: 768px) {
  .text .text-inner {
    padding: var(--space-y-medium-breakpoint-text) var(--space-x-medium-breakpoint-text);
  }
}

@media(min-width: 1200px) {
  .text .text-inner {
    padding: var(--space-y-large-breakpoint-text) var(--space-x-large-breakpoint-text);
  }
}

@container (width >=768px) {
  .text .text-inner {
    margin: 0 var(--space-medium-breakpoint-container) 0 var(--space-medium-breakpoint-container);
  }
}

@container (width >=1200px) {
  .text .text-inner {
    margin-left: var(--space-large-breakpoint-container);
    margin-right: var(--space-large-breakpoint-container);
    max-width: var(--max-width-container-large);
  }
}

@container (width >=1400px) {
  .text .text-inner {
    max-width: var(--max-width-container-extralarge);
  }
}

.text .text-eyebrow {
  background: var(--background-text-eyebrow);
  border-color: var(--border-color-text-eyebrow);
  border-radius: var(--border-radius-text-eyebrow);
  border-style: solid;
  border-width: var(--border-width-text-eyebrow);
  display: inline-flex;
  margin-bottom: var(--space-y-block-small-breakpoint-text-eyebrow);
  padding: var(--space-y-small-breakpoint-text-eyebrow) var(--space-x-small-breakpoint-text-eyebrow);
  width: fit-content;
}

.text .text-eyebrow h1,
.text .text-eyebrow h2,
.text .text-eyebrow h3,
.text .text-eyebrow h4,
.text .text-eyebrow h5,
.text .text-eyebrow h6,
.text .text-eyebrow span {
  color: var(--color-text-eyebrow);
  font-size: var(--size-small-breakpoint-text-eyebrow);
  font-weight: var(--weight-text-eyebrow);
  line-height: var(--line-height-small-breakpoint-text-eyebrow);
}

@media(min-width: 768px) {

  .text .text-eyebrow h1,
  .text .text-eyebrow h2,
  .text .text-eyebrow h3,
  .text .text-eyebrow h4,
  .text .text-eyebrow h5,
  .text .text-eyebrow h6,
  .text .text-eyebrow span {
    line-height: var(--line-height-medium-breakpoint-text-eyebrow);
  }
}

@media(min-width: 1200px) {

  .text .text-eyebrow h1,
  .text .text-eyebrow h2,
  .text .text-eyebrow h3,
  .text .text-eyebrow h4,
  .text .text-eyebrow h5,
  .text .text-eyebrow h6,
  .text .text-eyebrow span {
    line-height: var(--line-height-large-breakpoint-text-eyebrow);
  }
}

@media(min-width: 768px) {

  .text .text-eyebrow h1,
  .text .text-eyebrow h2,
  .text .text-eyebrow h3,
  .text .text-eyebrow h4,
  .text .text-eyebrow h5,
  .text .text-eyebrow h6,
  .text .text-eyebrow span {
    font-size: var(--size-medium-breakpoint-text-eyebrow);
  }
}

@media(min-width: 1200px) {

  .text .text-eyebrow h1,
  .text .text-eyebrow h2,
  .text .text-eyebrow h3,
  .text .text-eyebrow h4,
  .text .text-eyebrow h5,
  .text .text-eyebrow h6,
  .text .text-eyebrow span {
    font-size: var(--size-large-breakpoint-text-eyebrow);
  }
}

@media(min-width: 768px) {
  .text .text-eyebrow {
    padding: var(--space-y-medium-breakpoint-text-eyebrow) var(--space-x-medium-breakpoint-text-eyebrow);
  }
}

@media(min-width: 1200px) {
  .text .text-eyebrow {
    padding: var(--space-y-large-breakpoint-text-eyebrow) var(--space-x-large-breakpoint-text-eyebrow);
  }
}

@media(min-width: 768px) {
  .text .text-eyebrow {
    margin-bottom: var(--space-y-block-medium-breakpoint-text-eyebrow);
  }
}

@media(min-width: 1200px) {
  .text .text-eyebrow {
    margin-bottom: var(--space-y-block-large-breakpoint-text-eyebrow);
  }
}

.text .text-headline {
  font-family: var(--font-text);
  text-align: var(--horizontal-alignment-text);
}

.text .text-headline h1,
.text .text-headline h2,
.text .text-headline h3,
.text .text-headline h4,
.text .text-headline h5,
.text .text-headline h6,
.text .text-headline span {
  color: var(--color-text-headline);
  display: block;
  font-family: var(--font-text);
  font-size: var(--size-small-breakpoint-text-headline);
  font-weight: var(--weight-text-headline);
  line-height: var(--line-height-small-breakpoint-text-headline);
}

@media(min-width: 768px) {

  .text .text-headline h1,
  .text .text-headline h2,
  .text .text-headline h3,
  .text .text-headline h4,
  .text .text-headline h5,
  .text .text-headline h6,
  .text .text-headline span {
    line-height: var(--line-height-medium-breakpoint-text-headline);
  }
}

@media(min-width: 1200px) {

  .text .text-headline h1,
  .text .text-headline h2,
  .text .text-headline h3,
  .text .text-headline h4,
  .text .text-headline h5,
  .text .text-headline h6,
  .text .text-headline span {
    line-height: var(--line-height-large-breakpoint-text-headline);
  }
}

@media(min-width: 768px) {

  .text .text-headline h1,
  .text .text-headline h2,
  .text .text-headline h3,
  .text .text-headline h4,
  .text .text-headline h5,
  .text .text-headline h6,
  .text .text-headline span {
    font-size: var(--size-medium-breakpoint-text-headline);
  }
}

@media(min-width: 1200px) {

  .text .text-headline h1,
  .text .text-headline h2,
  .text .text-headline h3,
  .text .text-headline h4,
  .text .text-headline h5,
  .text .text-headline h6,
  .text .text-headline span {
    font-size: var(--size-large-breakpoint-text-headline);
  }
}

.text .text-section {
  text-align: var(--horizontal-alignment-text);
}

.text .text-section p,
.text .text-section li,
.text .text-section a {
  color: var(--color-text-section);
  font-size: var(--size-small-breakpoint-text-section);
  font-weight: var(--weight-text-section);
  line-height: var(--line-height-small-breakpoint-text-section);
}

@media(min-width: 768px) {

  .text .text-section p,
  .text .text-section li,
  .text .text-section a {
    line-height: var(--line-height-medium-breakpoint-text-section);
  }
}

@media(min-width: 1200px) {

  .text .text-section p,
  .text .text-section li,
  .text .text-section a {
    line-height: var(--line-height-large-breakpoint-text-section);
  }
}

@media(min-width: 768px) {

  .text .text-section p,
  .text .text-section li,
  .text .text-section a {
    font-size: var(--size-medium-breakpoint-text-section);
  }
}

@media(min-width: 1200px) {

  .text .text-section p,
  .text .text-section li,
  .text .text-section a {
    font-size: var(--size-large-breakpoint-text-section);
  }
}

.text .text-headline+.text-section {
  margin-top: var(--space-y-block-small-breakpoint-text-headline);
}

@media(min-width: 768px) {
  .text .text-headline+.text-section {
    margin-top: var(--space-y-block-medium-breakpoint-text-headline);
  }
}

@media(min-width: 1200px) {
  .text .text-headline+.text-section {
    margin-top: var(--space-y-block-large-breakpoint-text-headline);
  }
}

.text .text-section+.text-button {
  justify-content: var(--horizontal-alignment-text);
  margin-top: var(--space-y-block-small-breakpoint-text-button);
}

@media(min-width: 768px) {
  .text .text-section+.text-button {
    margin-top: var(--space-y-block-medium-breakpoint-text-button);
  }
}

@media(min-width: 1200px) {
  .text .text-section+.text-button {
    margin-top: var(--space-y-block-large-breakpoint-text-button);
  }
}