.allBooks > div:first-of-type {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
  }
  
  .allBooks img{
    display: block;
    width: 100%;
  }
  
  .allBooks > div:first-of-type > h2 {
    flex-basis: 100%;
    padding-bottom: 1rem;
  }
  
  .allBooks > div:first-of-type > select {
    font-size: 0.9em;
  }
  
  .allBooksContainer {
    padding-top: 1em;
  }
  
  .allBooksContainer .resultsSection {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: flex-start;
  }
  
  .allBooksContainer .bookItem {
    flex: 0 0 calc(100% / 2 - 1em/2);
    max-width: initial;
    margin-bottom: 1em;
    margin-right: 0em;
  }
  
  .allBooksContainer .bookItem:not(:nth-of-type(2n)) {
    margin-right: 1em;
  }
  
  .allBooksContainer .bookItem img {
    width: 100%;
  }
  
  .allBooks #pagination {
    width: 100%;
    padding: 1em 0em;
    text-align: center;
  }
  
  .bookItem > div > a {
    display: block;
  }
  
  #sortIcon::after {
    content: "";
    mask-image: var(--icon-fa-arrow-down-short-wide);
    width: 1.125em;
  }
  
  .searchTags {
    margin-top: 1em;
    flex: 0 0 100%;
  }
  
  .searchTags .tag {
    margin-right: 1em;
    margin-bottom: 1em;
    background-color: #e8e8e8;
    border-radius: 0.24em;
    cursor: pointer;
  }
  
  .searchTags .tag > span {
    display: inline-block;
    padding: 0.2em 0.5em;
    border-right: 0.1em solid #dcdcdc;
  }
  
  .searchTags .tag::after {
    content: "";
    mask-image: var(--icon-fa-xmark);
    width: 0.75em;
    font-size: 1em;
    padding: 0.2em 0.5em;
  }
  
  #searchBooks[data-main-view="all-books-page"] h2 {
    z-index: 10;
  }

  @media screen and (min-width: 500px){
    .allBooksContainer .bookItem {
      flex: 0 0 calc(100% / 3 - 2em/3);
    }
    
    .allBooksContainer .bookItem:not(:nth-of-type(2n)) {
      margin-right: 0em;
    }
    
    .allBooksContainer .bookItem:not(:nth-of-type(3n)) {
      margin-right: 1em;
    }
  }

  @media screen and (min-width: 768px) {
    .allBooks > div:first-of-type > h2 {
      flex-basis: auto;
      padding-bottom: 0rem;
    }
    
    .allBooks > div:first-of-type > button {
      display: none;
    }
    
    /* <body> is a grid: the filters take the first column, next to <main>, and the other rows span both. */
    
    body.all-books-page {
      grid-template-columns: auto 1fr;
    }
    
    body.all-books-page > *:not(#searchFilters):not(main) {
      grid-column: 1 / -1;
    }
    
    body.all-books-page > #searchFilters {
      grid-row: 5;
      grid-column: 1;
      align-self: stretch;
    }
    
    body.all-books-page > main {
      grid-column: 2;
    }
    
    #searchFilters {
      width: 15em;
      display: block;
      position: initial;
      z-index: 10;
      
      border: none;
      overflow: initial;
    }
    
    .all-books-page > #searchFilters {
      border-right: 0.05em solid var(--colour-border-color);
      margin-right: 1em;
    }
    
    #searchFilters .closeButtonCont {
      display: none;
    }
    
    .bookDetails .moreOptions {
      flex: initial;
    }
    
    .bookDetails .hideDetailsBtn {
      padding: 0.5em;
    }
  }

  @media screen and (min-width: 900px) {
    .allBooksContainer .bookItem {
      flex: 0 0 calc(100% / 4 - 6em/4);
    }
    
    .allBooksContainer .bookItem:not(:nth-of-type(3n)) {
      margin-right: 0em;
    }
    
    .allBooksContainer .bookItem:not(:nth-of-type(4n)) {
      margin-right: 2em;
    }
  }

  @media screen and (min-width: 1100px) {
    .allBooksContainer .bookItem {
      flex: 0 0 calc(100% / 5 - 8em/5);
    }
    
    .allBooksContainer .bookItem:not(:nth-of-type(4n)) {
      margin-right: 0em;
    }
    
    .allBooksContainer .bookItem:not(:nth-of-type(5n)) {
      margin-right: 2em;
    }
  }