.wb-session-list {
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-height: 100%;

  ol,
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .item {
    display: grid;
    grid-template-areas:
      "their-name our-name"
      "their-points our-points"
      "actions actions";
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, min-content);
    gap: 1em 2em;

    padding: 1em;
    border-radius: 5px;
    margin: 1em;

    >.theirname {
      font-weight: bold;
      grid-area: their-name;
      text-align: right;
    }

    >.ourname {
      font-weight: bold;
      grid-area: our-name;
      text-align: left;
    }

    >.theirpoints {
      grid-area: their-points;
      text-align: right;
    }

    >.ourpoints {
      grid-area: our-points;
      text-align: left;
    }

    >.actions {
      grid-area: actions;
      display: flex;
      justify-content: space-between;
      gap: 1em;

      >* {
        flex-grow: 1;
      }
    }
  }
}

.none {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 1em 1em 0;
  margin: 0;
  min-height: 100%;
  justify-content: end;

  >.item {
    display: grid;
    grid-template-areas:
      "their-name our-name"
      "their-points our-points"
      "actions actions";
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, min-content);
    gap: 1em 2em;

    padding: 1em;
    border-radius: 5px;
    margin-bottom: 1em;

    >.theirname {
      font-weight: bold;
      grid-area: their-name;
      text-align: right;
    }

    >.ourname {
      font-weight: bold;
      grid-area: our-name;
      text-align: left;
    }

    >.theirpoints {
      grid-area: their-points;
      text-align: right;
    }

    >.ourpoints {
      grid-area: our-points;
      text-align: left;
    }

    >.actions {
      grid-area: actions;
      display: flex;
      justify-content: space-between;
      gap: 1em;

      >* {
        flex-grow: 1;
      }
    }
  }
}