@layer component {
  .paragraph--cta-block {
    --background-color: var(--blue-700);
    --background-color-2: var(--blue-950);

    position: relative;
    color: var(--white);
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    padding: 1.875rem;
    overflow: hidden;
    text-decoration: none;

    &.bg--color-2 {
      --background-color: var(--blue-950);
      --background-color-2: var(--blue-700);
    }

    /* Position background image relative to image container. */
    & .cta-block__image {
      position: relative;
      overflow: visible;
    }

    & .cta-block__image::after {
      content: '';
      position: absolute;
      inset-block-start: 0;
      inset-block-end: -1.875rem;
      inset-inline: -1.875rem;
      background-image: url('/themes/custom/bms/images/bg--wavy.png');
      background-position: top left;
      background-size: cover;
      background-repeat: no-repeat;
      z-index: 0;
    }

    & .field--field-title h2 {
      color: var(--white);
      font: var(--font-head-m-light);
      letter-spacing: var(--font-head-m-light);
      margin-block-end: 1rem;
    }

    & .field--field-description {
      font: var(--font-body-s-regular);
      letter-spacing: var(--letter-spacing-body-s-regular);
    }

    & .field--field-link {
      margin-block-start: 1.25rem;
    }

    & .field--field-image {
      position: relative;
      z-index: 1;
      margin-block-start: 2.5rem;
    }
  }

  .paragraph--cta-block--has-image {
    background-image: linear-gradient(90deg, var(--background-color-2) -33.55%, var(--background-color) 100%);

    & .field--field-title h2 {
      font: var(--font-head-l-light);
      letter-spacing: var(--font-head-l-light);
    }
  }

  .paragraph--cta-block--no-image {
    &::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 7rem;
      background-repeat: repeat-x;
      opacity: 0.2;
    }
  }

  @container (min-width: 48rem) {
    .paragraph--cta-block {
      padding: 2.5rem 2.5rem 2.5rem 3rem;

      /* Position background image relative to Paragraph container. */
      & .cta-block__image {
        position: static;
      }

      & .cta-block__image::after {
        inset-inline-start: 50%;
        inset-inline-end: 0;
        inset-block: 0;
      }

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

      & .field--field-description {
        font: var(--font-body-l-regular);
        letter-spacing: var(--letter-spacing-body-l-regular);
      }

      & .field--field-link {
        margin-block-start: 2.5rem;
      }

      & .field--field-image {
        margin-block-start: 0;
      }
    }

    .paragraph--cta-block--has-image {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 5rem;

      & > * {
        flex: 1;
      }

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

    .paragraph--cta-block--no-image::after {
      background-size: auto 10rem;
    }
  }
}