@layer component {
  .paragraph--event-cta {
    padding-block: 6.25rem 7.5rem;
    background-color: var(--blue-950);
    color: var(--white);
    background-image:
      url('/themes/custom/bms/images/bg--img-tiles--mobile-top.png'),
      url('/themes/custom/bms/images/bg--img-tiles--mobile-bottom.png')
    ;
    background-position: top -3.5rem right, bottom -3.75rem left -2rem;
    background-size: 18rem, 12rem;
    background-repeat: no-repeat;

    & .event-cta__link {
      margin-block-start: 2.5rem;
    }

    & .field--field-title h2 {
      color: inherit;
      font: var(--font-head-m-light);
      letter-spacing: var(--letter-spacing-head-m-light);
      margin-block-end: 1.875rem;
      background-color: var(--blue-950);
    }

    & .field--field-event-title {
      font: var(--font-head-xs-semibold);
      letter-spacing: var(--letter-spacing-head-xs-semibold);
      margin-block-end: 0.375rem;
    }

    & .field--field-event-date {
      font: var(--font-body-l-semibold);
      letter-spacing: var(--letter-spacing-body-l-semibold);
      margin-block-end: 0.375rem;
    }

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

  @media screen and (min-width: 48rem) {
    .paragraph--event-cta {
      padding-block: 3rem;
      background-image: none;

      & .paragraph__inner {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2rem;
        position: relative;
      }

      & .paragraph__inner::after {
        content: '';
        position: absolute;
        inset-block: -3rem;
        inset-inline-start: 50%;
        inset-inline-end: -2rem;
        background-image: url('/themes/custom/bms/images/bg--img-tiles.png');
        background-repeat: no-repeat;
        background-position: top -0.25rem right;
        background-size: cover;
        z-index: 0;
      }

      & .paragraph__inner > div {
        position: relative;
        z-index: 1;
      }

      .event-cta__content {
        max-inline-size: 39.375rem;
      }

      & .event-cta__link {
        flex-shrink: 0;
        margin-block-start: 0;
      }

      & .field--field-title h2 {
        font: var(--font-head-l-light);
        letter-spacing: var(--letter-spacing-head-l-light);
        margin-block-end: 2.25rem;
      }
    }
  }
}