.text-container {
  display: block;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  text-align: center;

  &.color-black {
    h1,
    h2,
    h3,
    .text,
    p,
    li,
    .eyebrow {
      color: var(--color-black);
    }

    .logo:not(.pantone) svg path {
      fill: var(--color-black) !important;
    }
  }

  &.align-mobile-left {
    text-align: left;

    .cta-container {
      justify-content: left;
    }

    .logo {
      margin-right: auto;
      margin-left: 0;
    }
  }

  &.align-mobile-center {
    text-align: center;

    .cta-container {
      justify-content: center;
    }

    .logo {
      margin-left: auto;
      margin-right: auto;
    }
  }

  &.align-mobile-right {
    text-align: right;

    .cta-container {
      justify-content: right;
    }

    .logo {
      margin-left: auto;
      margin-right: 0;
    }
  }

  &.align-tablet-left {
    @media screen and (min-width: 480px) {
      text-align: left;

      .cta-container {
        justify-content: left;
      }

      .logo {
        margin-right: auto;
        margin-left: 0;
      }
    }
  }

  &.align-tablet-center {
    @media screen and (min-width: 480px) {
      text-align: center;

      .cta-container {
        justify-content: center;
      }

      .logo {
        margin-left: auto;
        margin-right: auto;
      }
    }
  }

  &.align-tablet-right {
    @media screen and (min-width: 480px) {
      text-align: right;

      .cta-container {
        justify-content: right;
      }

      .logo {
        margin-left: auto;
        margin-right: 0;
      }
    }
  }

  &.align-desktop-left {
    @media screen and (min-width: 1000px) {
      text-align: left;

      .cta-container {
        justify-content: left;
      }

      .logo {
        margin-right: auto;
        margin-left: 0;
      }
    }
  }

  &.align-desktop-center {
    @media screen and (min-width: 1000px) {
      text-align: center;

      .cta-container {
        justify-content: center;
      }

      .logo {
        margin-left: auto;
        margin-right: auto;
      }
    }
  }

  &.align-desktop-right {
    @media screen and (min-width: 1000px) {
      text-align: right;

      .cta-container {
        justify-content: right;
      }

      .logo {
        margin-left: auto;
        margin-right: 0;
      }
    }
  }

  .eyebrow {
    font-family: 'jebrainsmono', sans-serif;
    font-size: var(--size-3);
    line-height: 18px;
    letter-spacing: 10%;
    text-transform: uppercase;
    margin-bottom: var(--margin-2xs);
    color: var(--color-gray-500);
  }

  .logo {
    display: block;
    width: 100%;
    margin: 0 0 var(--margin-small) 0;

    @media screen and (max-width: 767px) {
      max-width: 240px !important;
    }

    @media screen and (min-width: 1000px) {
      margin: 0 auto var(--size-12) auto;
    }

    svg {
      display: block;
      width: 100%;
      height: auto;
    }

    &:not(.pantone) {
      svg path {
        fill: var(--color-black);
      }

      &.black svg path {
        fill: var(--color-black) !important;
      }

      &.white svg path {
        fill: white !important;
      }

      &.red svg path {
        fill: var(--color-hoyt-red) !important;
      }

      &.gray svg path {
        fill: var(--color-cool-gray-9) !important;
      }

      &.green svg path {
        fill: var(--color-xceed-2-green) !important;
      }
    }
  }

  h1,
  h2 {
    margin: 0 0 var(--size-4) 0;
    padding: 0;
    font-size: var(--size-6);
    line-height: var(--size-7);
    letter-spacing: -2%;

    @media screen and (min-width: 480px) {
      font-size: var(--size-9);
      line-height: var(--size-10);
    }

    @media screen and (min-width: 1000px) {
      font-size: var(--size-15);
      line-height: var(--size-16);
      margin: 0 0 var(--size-6) 0;
    }
  }

  h3 {
    padding: 0;
    font-size: var(--size-6);
    line-height: var(--size-7);
    letter-spacing: -2%;
    margin: 0 0 var(--size-4) 0;

    @media screen and (min-width: 480px) {
      font-size: var(--size-7);
      line-height: var(--size-10);
    }

    @media screen and (min-width: 1000px) {
      font-size: var(--size-6);
      line-height: var(--size-12);
      margin: 0 0 var(--size-6) 0;
    }
  }

  .text {
    margin: 0 0 var(--margin-xs) 0;
    padding: 0;

    @media screen and (min-width: 480px) {
      margin-bottom: var(--margin-small);
    }

    @media screen and (min-width: 1000px) {
      margin: 0 0 var(--size-12) 0;
    }
  }

  p {
    margin: 0 0 var(--margin-xs) 0;
  }

  p a {
    color: var(--color-hoyt-red);
    text-decoration: underline;
  }

  p a:hover {
    text-decoration: none;
  }

  ul,
  ol {
    margin: 0;
    padding: 0 0 0 15px;
  }

  ul li,
  ol li {
    color: var(--color-black);
  }

  > *:last-child,
  .text > *:last-child,
  .text-inner > *:last-child {
    margin-bottom: 0;
  }
}

.cta-container {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--size-6);
  align-items: center;
  justify-content: center;
  column-gap: var(--size-6);
  font-size: 0;
  margin-bottom: var(--margin-xs);

  @media screen and (min-width: 480px) {
    margin-bottom: var(--margin-small);
  }

  @media screen and (min-width: 1000px) {
    margin-bottom: var(--size-12);
  }
}