.charts {
    display: flex;
    place-content: center;
    flex-flow: wrap;
    gap: 2rem;
  }
  
  .pie {
    flex: 1 0 225px;
    max-width: 234px;
    aspect-ratio: 1;
    border-radius: 50%;
    /* border: 1px solid; */
  
    background-image: conic-gradient( from 45deg, #CF4655 12%, #F16063 0 42%, #F7936F 0 79%, #66CB9F 0 );
  }

  
  .legends {
    margin-block-end: 2rem;
    font-size: 0.9rem;
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
    gap: 1rem;
  }
  
  .legends span {
    position: relative;
    padding-inline-start: 1.25rem;
  }
  
  .legends span::before {
    position: absolute;
    top: 2px;
    left: 0;
    content: "";
    width: 14px;
    height: 14px;
    aspect-ratio: 1;
    border-radius: 2px;
  }
  
  .legends span:nth-child(1)::before {
    background-color: #66CB9F;
  }
  
  .legends span:nth-child(2)::before {
    background-color: #F7936F;
  }
  
  .legends span:nth-child(3)::before {
    background-color: #F16063;
  }
  
  .legends span:nth-child(4)::before {
    background-color: #CF4655;
  }