#chart-outer-container {
    display: grid;
    grid-template-columns: 1fr 750px 1fr;
    grid-template-rows: 750px;
    grid-template-areas: "detail_1 chart detail_0";
    justify-items: center;
    padding: 0 2rem 4rem;
    width: 100vw;
  }
  
  #chart-container {
    grid-area: chart;
    position: relative;
    width: 750px;
    max-width: 100%;
  }
  #chart-container > .chart-doughnut-inner {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    border: 13px solid #fff;
    overflow: hidden;
  }
  #chart-container > .chart-doughnut-inner > video {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
  }
  #chart-container #chart {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
  }
  
  #detail-container-0 {
    grid-area: detail_0;
  }
  
  #detail-container-1 {
    grid-area: detail_1;
  }
  
  .detail-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 1fr;
    align-items: center;
  }
  .detail-container > * > * {
    display: none;
  }
  .detail-container > * > *.active {
    display: block;
  }
  
  @media screen and (max-width: 1500px) {
    #chart-outer-container {
      grid-template-columns: 100%;
      grid-template-rows: auto;
      grid-template-areas: "chart" "detail_0" "detail_1";
      padding: 0 2rem 2rem;
    }
    #chart-container {
      width: 100%;
      max-width: 750px;
    }
    .detail-container {
      display: block;
      margin-top: 1rem;
      max-width: var(--max-width-content);
    }
  }