.healthWrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  > {
    .healthContainer {
      display: grid;
      grid-template-columns: repeat(3, auto);
      justify-items: center;
      gap: 0px;
      justify-content: start;
      > {
        * {
          margin: -1px;
        }
        /* TODO: Refactor to use Labels !!!! */
        label  {
          &.healthTrackerBox {
            cursor: pointer;
            order: 1;
            background-color: red;
            z-index: 1;
            position: relative;
            border: 2px solid #550000;
            border-radius: 0px;
            appearance: none;
            width: 6rem;
            height: 6rem;
            border-radius: 3px;

            &.reset {
              order: 2;
              background-color: brown;
            }
  
            &:after {
              position: absolute;
              content: "-1";
              top: 2px;
              right: 4px;
            }
  
            &:checked {
              position: absolute;
              opacity: 0;
              z-index: 0;
            }
  
            &:checked ~ .healthTrackerBox {
              order: 3;
              background-color: #444444;
            }
  
            &:focus {
              outline: none;
            }
          }
        }
      }
    }
  }
}