@layer override {
  .style--bold-blue {
    color: var(--color-primary);
    font: var(--font-body-l-semibold);
    letter-spacing: var(--letter-spacing-body-l-semibold);
    font-weight: 500;
  }

  .style--arrow-link {
    font: var(--font-body-l-regular);
    letter-spacing: var(--letter-spacing-body-l-regular);
    text-decoration: none;
    padding-block-end: 0.125rem;
    border-block-end: 2px solid currentColor;
    padding-inline-end: calc(.5ch + 1em);
    position: relative;

    &::before,
    &::after {
      display: inline-block;
      position: absolute;
      inset-inline-end: 0;
      inset-block-start: .25em;
      transition: var(--transition);
      block-size: 100%;
      inline-size: 1em;
      vertical-align: middle;
    }

    &::before {
      content: url('/themes/custom/bms/images/arrow--blue.svg');
      opacity: 1;
    }

    &::after {
      content: url('/themes/custom/bms/images/arrow--light-blue.svg');
      opacity: 0;
    }

    &:hover::before,
    &:focus-visible::before {
      opacity: 0;
    }

    &:hover::after,
    &:focus-visible::after {
      opacity: 1;
    }
  }

  :where(.field--text-long, .field--text-with-summary) {
    & .media--image {
      margin-block: clamp(1.5rem, 5vw, 3.75rem);
    }

    & .media--document {
      margin-block: 1.25rem;
    }

    & .media--document a {
      font: inherit;
      font-weight: 500;
    }

    & > *:last-child {
      margin-block-end: 0;
    }
  }

  @media screen and (min-width: 48rem) {
    .style--bold-blue {
      font: var(--font-head-m-semibold);
      letter-spacing: var(--letter-spacing-head-m-semibold);
      font-weight: 500;
    }
  }
}