.infographic {
  background-color: var(--color-white);
  color: inherit;
  padding: var(--space-triple) 0 var(--space-triple) var(--space-triple);
}

@media only screen and (min-width: 769px) {
  .infographic {
    padding: var(--space-quadruple) 0 var(--space-quadruple) var(--space-quadruple);
    position: relative;
    height: 500px;
    overflow: hidden;
    color: var(--color-grey-darkest);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .infographic::before {
    content: '';
    color: var(--color-night-sky);
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-bottom: 85vw solid var(--color-night-sky);
    border-left: 65vw solid transparent;
    border-right: 140vh solid;
  }
}

@media only screen and (min-width: 1023px) {
  .infographic::before {
    border-bottom: 55vw solid var(--color-night-sky);
    border-left: 55vw solid transparent;
    border-right: 140vh solid;
  }
}

@media only screen and (min-width: 2200px) {
  .infographic::before {
    border-bottom: 30vw solid var(--color-night-sky);
    border-left: 40vw solid transparent;
    border-right: 140vh solid;
  }
}

@media only screen and (min-width: 769px) {
  .infographic-left {
    position: relative;
    width: 400px;
  }
}

.infographic-right {
  color: var(--color-white);
  background-color: var(--color-night-sky);
  overflow: hidden;
}

@media only screen and (min-width: 769px) {
  .infographic-right {
    position: relative;
    background-color: unset;
  }
}

.infographic img {
  position: relative;
  right: calc(var(--space-quadruple) * -1);
  margin: var(--space-double) 0 0 0;
}

@media only screen and (min-width: 500px) {
  .infographic img {
    right: calc(var(--space-nonagon) * -1);
  }
}

@media only screen and (min-width: 769px) {
  .infographic img {
    right: calc(var(--space-decagon) * -1);
    margin: 0;
  }
}