@media screen and (min-width: 1600px) {
  :root {
    --books-in-row: 3;
  }
}

@media screen and (min-width: 1100px) and (max-width: 1600px) {
  :root {
    --books-in-row: 2;
  }
}

@media screen and (min-width: 450px) and (max-width: 600px) {
  :root {
    --border-margin: 25px;
  }
}

@media screen and (max-width: 450px) {
  :root {
    --border-margin: 15px;
  }

  main .books.table,
  main .books.list,
  main .books.table .book,
  main .books.list .book {
    gap: 15px;
  }

  main .books.table .book {
    width: 100%;
    background: none;
    padding: 0;
    border-radius: 0;
  }

  main .books.table .book + .book {
    border-top: var(--border);
    padding-top: 15px;
  }

  main .books.list .book {
    padding: 15px;
  }
}


@media screen and (min-width: 1100px) {
  main .setting + .setting {
    border-left: var(--border);
    padding-left: 15px;
  }
}

@media screen and (min-width: 600px) {
  main .books.table .book img {
    max-width: 250px;
    max-height: 250px;
  }
}

@media screen and (max-width: 1100px) {
  :root {
    --books-in-row: 1;
  }

  main .settings {
    flex-direction: column;
  }
}

@media screen and (max-width: 600px) {
  main .books.table .book img {
    max-width: 150px;
    max-height: 150px;
  }

  main .books.list .book .subject {
    display: none;
  }
}