/* Tables */
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
table {
    max-width: 100%;
    width: 100%;
    table-layout: fixed;
}
table img {
    max-width: 100%;
}

/* Default page */
#page-liner {
    background: rgb( 255, 255, 255 );
    margin: auto auto auto auto; /* [top, right, bottom, left]. add [10px auto 10px auto] to add gap above and below website. */
    min-width: 720px;
    max-width: 1280px;
    box-shadow: 0px 0px 2px #5b5b5b;
}

/* Body */
body {
    font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 18px;
    font-weight: 300;
}
b,strong {
    font-weight: bold;
}

/* Grids (books) -------------------------------------------------------------- */
.grid-container-5cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 4 columns */
    gap: 10px;
    width: 100%;

    box-sizing: border-box; /* TODO: THIS IS NEW update home */
    padding:1% 1% 1% 1%; /* TODO: THIS IS NEW update home */
    background-color: #feedb1; /* TODO: THIS IS NEW update home */
}

.grid-container-4cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    gap: 10px;
    width: 100%;

    box-sizing: border-box;
    padding:1% 1% 1% 1%;
    background-color: #feedb1;
}

.grid-container-3cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 4 columns */
    gap: 10px;
    width: 100%;

    box-sizing: border-box;
    padding:1% 1% 1% 1%;
    background-color: #feedb1;
}

.grid-container-2cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 4 columns */
    gap: 10px;
    width: 100%;

    box-sizing: border-box;
    padding:1% 1% 1% 1%;
    background-color: #feedb1;
}

.grid-item {
    background-color: white;
    text-align: left;
}

.grid-item-with-border { /* This border will include the text */
    background-color: white;
    border: 1px solid #ddd;
    text-align: left;
}

.grid-item img {
    width: 100%;
    height: auto;
    display: block;
    padding: 0px;
}

.grid-item .caption {
    padding: 5px 0 5px 0;  /* top, right, bottom, left */
}

.grid-item .caption-ar {
    padding: 5px 0 5px 0;
    text-align: right;
    direction: rtl;
}