@layer components {
ul.table {
  padding: 0;
  list-style-type: none;
  display: grid;
  gap: 10px;
  margin-bottom: 20px;

  li {
    display: grid;
    align-items: center;
    justify-items: center; /* Center align items horizontally */
    padding: 10px;
    border-bottom: var(--border-width) solid var(--border);

    &:first-child {
      font-weight: bold;
      border-bottom: var(--border-width-thick) solid var(--border-strong);
      text-align: center; /* Ensure header text is centered */
      .field {
        display: none;
      }
    }

    .task {
      display: contents;

      .field {
        display: grid;
        grid-template-columns: auto 1fr;
        text-align: center; /* Center text for fields */
        justify-content: center; /* Center the field content */
        align-items: center; /* Vertically center */
        
        .label {
          display: none;
        }
        
        .value {
          text-align: center;
          justify-self: center;
        }
      }

      .actions {
        display: flex;
        gap: 5px;
        justify-content: center; /* Center actions */
        justify-self: end;
      }
    }
  }
}

@media (max-width: 768px) {
  ul.table {
    li {
      grid-template-columns: 1fr;
      gap: 5px;

      &:first-child {
        display: none;
      }

      .task {
        .field {
          .label {
            display: block;
            font-weight: bold;
          }
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        .value {
          text-align: center;
          justify-content: center;
        }

        .actions {
          justify-self: center;
          margin-top: 10px;
        }
      }
    }
  }
}
}