@layer component {
  .block--cta {
    color: var(--white);
    background: linear-gradient(90deg, var(--blue-700) 36.98%, var(--blue-500) 114.97%);
    padding-block: var(--layout-component-block-space);

    & a {
      color: inherit;
    }

    & a[href*="www.linkedin.com"] {
      position: relative;
    }

    & a[href*="www.linkedin.com"]::before {
      content: '';
      display: inline-block;
      vertical-align: middle;
      block-size: 1.25rem;
      inline-size: 1.25rem;
      background-image: url('/themes/custom/bms/images/logo--linkedin-white.png');
      background-size: contain;
      margin-inline-end: 0.625rem;
    }

    & .block--cta__inner {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    & .block--cta__inner:has(.field--body) > * {
      flex: 1;
    }

    & .block--cta__content > * + * {
      margin-block-start: 1rem;
    }

    & .field--field-heading {
      font: var(--font-head-m-light);
      letter-spacing: var(--letter-spacing-head-m-light);
    }


    & .field--body p {
      max-inline-size: 36.25rem;
    }
  }

  .block--cta.block--cta--no-cta {
    position: relative;
    background: linear-gradient(90deg, var(--blue-500) -41.94%, var(--blue-700) 38.84%);

    &::after {
      content: '';
      position: absolute;
      inset-block-end: -1rem;
      inset-inline-start: 0;
      inline-size: 100%;
      block-size: 100%;
      border-radius: inherit;
      pointer-events: none;
      background-image: url('/themes/custom/bms/images/bg--pill.png');
      background-position: left bottom;
      background-size: auto 11rem;
      background-repeat: repeat-x;
      opacity: 0.1;
    }
  }

  @media screen and (min-width: 48rem) {
    .block--cta .block--cta__inner {
      flex-direction: row;
      align-items: start;
      justify-content: space-between;
      gap: 1rem;
    }

    .block--cta .field--field-heading {
      font: var(--font-head-l-light);
      letter-spacing: var(--letter-spacing-head-l-light);
    }

    .block--cta.block--cta--no-cta .field--field-heading {
      font: var(--font-head-xl-light);
      letter-spacing: var(--letter-spacing-head-xl-light);
    }
  }
}