@layer genr.component {
    .accent-word {
      display: inline-flex;
      position: relative;
      margin-bottom: 4rem;

      &:has(.accent--2xl) {
        margin-bottom: 2rem;
      }

      .accent {
        position: absolute;
        right: -50%;
        transform: translateX(-3.5rem) translateY(1.5rem);
      }
    }

    .accent {
      display: inline-block;
      pointer-events: none;
      fill: var(--color-signal-violet);
    }

    .accent--sm {
      width: 1rem;
      height: 1rem;
    }

    /* .accent--md {  } */

    .accent--lg {
      width: 2rem;
      height: 2rem;
    }

    .accent--xl {
      width: 3rem;
      height: 3rem;
    }

    .accent--2xl {
      width: 5rem;
      height: 5rem;
    }

    .accent--3xl {
      width: 6.5rem;
      height: 6.5rem;

      @media (width > 768px) {
        width: 7.5rem;
        height: 7.5rem;
      }
    }

    /* quick fix for flashing accent when moving with javascript */
    .headline {
      .accent {
        display: none;
      }

      .accent-word {
        .accent {
          display: inline-block;
        }
      }
    }
}