.graph {
  display: grid;
  overflow-x: clip;
  padding-inline: var(--space-small);
  position: relative;
}

.graph__container {
  background-color: #fff;
  border-radius: 0.1em;
  box-shadow: var(--box-shadow);
  display: grid;
  margin-inline: auto;
  padding: var(--space-large) var(--space-neutral);
  position: relative;
  transform: rotate(1deg);
  width: min(100%, 40em);
}

.graph__container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/background/products_bg.webp') center center no-repeat;
  background-size: cover;
  border-radius: inherit;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

/* Ensure all direct children sit above the pseudo-element */
.graph__container > * {
  position: relative;
  z-index: 1;
}

.base__container {
  border-radius: 0.1em;
  box-shadow: var(--box-shadow);
  margin-inline: auto;
  padding: var(--space-large) var(--space-neutral);
  position: relative;
  width: min(100%, 40em);
}


@media(min-width: 64em) {

  .graph {
    padding-inline: var(--space-neutral);
  }

  .graph__container {
    padding: var(--space-x-large) var(--space-neutral);
  }

}