Vanilla JS FAQ accordion

Hello!

I made the accordion with JS, pretty much just adding/removing different classes. My main issue, as with my prior project, is with the background images.

I spent far more time than I'd like to admit getting the background images to look as they do in the desktop view. I'm not entirely sure how I got the background squares to where they are, and frankly I don't understand how the numbers I wound up using made it work.

This is the code that contains the square background image for the desktop view.

    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    background-image: url("images/bg-pattern-desktop.svg");
    background-position: 115% 60%;
    background-repeat: no-repeat;
    background-size: auto;
    overflow: hidden;
  }

  .svg__desktop {
    position: relative;
    left: -15%;
    max-width: 100%;
  }```

For the background-position, I thought I would need something like

```background-position: -15% 50%;
background-size: 100%;```

No documents I saw said 115% was a valid value for background position. I played with the numbers in Dev Tools and got that, but from my understanding, 115% would place the image outside the right edge of the container and 15% more outside. Instead, it went to the left? 

Any suggestions on how to improve the layout of any of the images are greatly appreciated!