.DomGraphic {
  --maxWidth: 100%;
  --willChange: initial;
  position: relative;
  width: 100%;
  max-width: var(--maxWidth)
}

@media (max-width:600px) {
  .DomGraphic {
    max-width: var(--maxWidthPhone, var(--maxWidth))
  }
}

@media (min-width:600px) and (max-width:899px) {
  .DomGraphic {
    max-width: var(--maxWidthTablet, var(--maxWidth))
  }
}

@media (min-width:900px) {
  .DomGraphic {
    max-width: var(--maxWidthDesktop, var(--maxWidth))
  }
}

.DomGraphic__heightContainer {
  height: 0;
  width: 100%;
  max-width: var(--maxWidth);
  padding-bottom: var(--aspectRatio)
}

.DomGraphic__scaleContainer {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  will-change: var(--willChange)
}

.DomGraphic--isAnimating .DomGraphic__scaleContainer {
  will-change: transform
}