.chart-container {
  position: relative;
  width: 100%;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
  image-rendering: high-quality;
}

/* Fix for canvas rendering - prevent distortion */
#emissionsChart, #emissionsChart-m,
#waterConsumptionChart, #waterConsumptionChart-m,
#waterConsumptionChart2, #waterConsumptionChart2-m {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* REMOVE or comment out the conflicting media query rules below */
/*
@media only screen and (min-width: 768px) {
  .chart-container.service-img {
    position: absolute;
    right: -10%;
    bottom: 0;
    height: 100%;
    width: 60%; 
    max-width: 450px; 
  }
  
  .chart-container.service-img-s {
    display: none;
  }
  
  .chart-container.service-img-m {
    display: block;
  }
}

@media only screen and (min-width: 992px) {
  .chart-container.service-img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 55%; 
    max-width: 500px; 
  }
} 
*/