why does a ♡ break? 1.0

[nobr]
  [div=display: none;]
    [font=Kosugi]font call[/font]
    [font=Blinker]font call[/font]
    [font=Abril Fatface]font call[/font]
  [/div]
  [div=
  --accent: crimson;
  --bgIMG: url(https://placehold.co/850x500);
  --patIMG: url(https://i.imgur.com/4vO9MnX.png);
  --displayFont: 'Kosugi', sans-serif;
  --contrastFont: 'Abril Fatface', serif;
  --txtFont: 'Blinker', sans-serif;
  display: flex;
  position: relative;
  flex-flow: column nowrap;
  width: clamp(250px, calc(100% - 1rem), 875px);
  background: var(--bgColor);
  padding-bottom: 5rem;
  margin: 1rem auto;
  box-sizing: border-box;
  overflow: hidden;
  --padde: clamp(2rem, 10%, 10rem);
  --bgColor: rgba(0,0,0,1);
  --txtColor: rgba(255,255,255,1);]
    [div=
    position: relative;
    flex: 0 auto;
    position: relative;
    width: 100%;
    filter: saturate(0%);
    background-color: var(--bgColor);
    background-image: var(--patIMG), linear-gradient(0deg, var(--bgColor) 25%, rgba(0,0,0,.4) 100%), var(--bgIMG);
    background-repeat: repeat, no-repeat, no-repeat;
    background-position: top left, top left, center center;
    background-size: auto, cover, cover;
    background-blend-mode: soft-light, normal, normal;
    padding-top: 40%;]
      [div=
      position: absolute;
      transform: translate(-50%,-50%);
      left: 50%;
      top: 50%;
      color: var(--bgcolor);
      font-size: clamp(3rem, 15vh, 250px);
      font-family: var(--contrastFont);
      mix-blend-mode: soft-light;]
        role
      [/div]
      [div=
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 100%;
      box-sizing: border-box;
      padding: 0px var(--padde);
      color: var(--txtColor);
      font-family: var(--displayFont);
      font-size: 3rem;
      text-transform: uppercase;]
        name here
      [/div]
    [/div]
    [div=
    flex: 0 auto;
    box-sizing: border-box;
    width: 100%;
    padding: 2px var(--padde);
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    text-transform: uppercase;
    color: var(--txtColor);
    font-family: var(--displayFont);
    font-size: .9rem;
    letter-spacing: .04rem;
    line-height: 1.2;]
      [div=flex: 0 auto; padding: 2px .75rem; background: var(--accent);]info[/div]
      [div=flex: 0 auto; padding: 2px .75rem; background: var(--accent);]info[/div]
      [div=flex: 0 auto; padding: 2px .75rem; background: var(--accent);]info[/div]
    [/div]
    [div=
    position: relative;
    flex: 0 auto;
    padding: 3rem var(--padde);
    padding-right: calc(var(--padde) + 3rem);
    font-family: var(--txtFont);
    color: var(--txtColor);
    text-align: justify;]
      [div=display: block; margin-bottom: .65rem;]
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id diam massa. Vestibulum elementum, nulla sed commodo scelerisque, augue nisi maximus risus, ac commodo nibh turpis vitae justo. Morbi tempus nisl eu tellus eleifend, sed rhoncus sapien venenatis. Donec pharetra vulputate neque nec vehicula. Nulla hendrerit varius dolor. Phasellus in leo felis. Etiam viverra mauris ipsum, nec hendrerit est tristique vitae. Donec luctus neque tempor purus varius, vel consectetur urna luctus. Phasellus convallis risus sit amet mi imperdiet luctus. Suspendisse consectetur, justo ac maximus gravida, purus sapien rutrum ipsum, nec molestie metus urna quis orci. Praesent bibendum nibh et dui vehicula interdum. Donec massa sem, interdum sed luctus a, ullamcorper non sapien. Sed efficitur nec diam sit amet cursus. Suspendisse scelerisque mattis elit dignissim gravida. Nullam quis velit pharetra, congue nulla vitae, congue enim.
      [/div]
      [div=display: block; margin-bottom: .65rem; box-sizing: border-box; width: 90%; margin-left: 10%; border-left: 5px solid var(--accent); padding: 3px 5% 3px 3%; font-family: var(--displayFont);]
        Fusce bibendum nisl a ipsum condimentum tempor.
      [/div]
      [div=display: block; margin-bottom: .65rem;]Proin sollicitudin, neque ac dapibus imperdiet, dui risus hendrerit elit, at tincidunt massa erat eu ex. Aenean non purus vitae nisl lacinia condimentum. Nunc vel orci enim. Aenean dignissim consequat facilisis. Praesent in odio at augue lobortis imperdiet in sit amet quam. In hac habitasse platea dictumst. Etiam quis viverra augue. Etiam accumsan nulla et orci volutpat, nec convallis ipsum fermentum.[/div]
      [div=display: block; margin-bottom: .65rem;][div=display: inline; color: var(--accent); font-weight: bold;]"Vivamus accumsan dolor vehicula ante tempus suscipit."[/div] Nulla quam nisl, pharetra id dui eget, ultrices egestas lacus. Donec ac leo sit amet dui scelerisque rhoncus lacinia id diam. Morbi blandit eu neque vel pulvinar. Pellentesque elementum pharetra sapien, nec mattis orci tempor in. Aenean ac purus sit amet lectus malesuada congue. Fusce pulvinar auctor ex id faucibus. Sed vulputate ante eget enim congue dignissim. Nunc in neque quis augue semper tincidunt sagittis vitae arcu. Phasellus elementum nulla quis mi commodo commodo.[/div]
    [/div]
    [div=
    position: absolute;
    bottom: 0px;
    height: 50%;
    width: 3rem;
    background: var(--accent);
    right: 5%;
    font-size: 0px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
    padding: 5% 0px;
    gap: 5px;]
      [div=flex: 0 auto; filter: saturate(0); mix-blend-mode: multiply;][USER=32692]@fluticasone[/USER][/div]
      [div=flex: 0 auto; filter: saturate(0); mix-blend-mode: multiply;][USER=32692]@fluticasone[/USER][/div]
      [div=flex: 0 auto; filter: saturate(0); mix-blend-mode: multiply;]tag here[/div]
      [div=flex: 0 auto; filter: saturate(0); mix-blend-mode: multiply;]tag here[/div]
    [/div]
  [/div]
[/nobr]