:root {
    --c-padding: 1.5rem;
}

.site-wrapper {
	display: grid;
	min-height: 100vh; /* Minimum height equal to the viewport height */
	grid-template-rows: auto 1fr auto; /* Defines three rows */
    background-color: #FFEDD4
}

header { background-color: #FFCD88; }
footer { background-color: #C38D56;
    margin-top: 2rem;
    padding: 1rem 0;
}

.container {
	max-width: 90rem;
	margin: 0 auto;
	padding: 0 var(--c-padding);
	overflow: hidden;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    display: inline-block;
    margin-left: 1rem;
}

.nav-links li a {
    color: #813702;
    text-decoration: none;
    padding: 10px 15px;
    display: inline-block;
    transition: background-color 0.3s;
}

.nav-links li a:hover {
    background-color: #a55013;
	color: #ffffff;
}

.genre-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 200px;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}
.genre-wrapper > div { 
	/* padding: 1rem; */
	border: solid 1px #a55013;
    background-color: #db9d60;
}
.genre-wrapper > div > a {
	padding: 1rem;
	display: block;
	height: calc(100% - 2rem);
	color: #6e350b;
	font-size: 1.5rem;
	font-weight: 600;
	text-decoration: none;
	text-shadow: 0px 0px .25rem #ff9e58;
}

#logo { 
    margin: 1rem 1rem 1rem 0rem;
    cursor: pointer;
}

.home-wrapper {
    display: grid;
    min-height: 100%;
    /* align-content: end; */
    
}
.home-wrapper > .container {
    width: calc(100% - var(--c-padding)*2);
}

.home-wrapper .about {
    align-self: end;
    background-color: #ffcc83;
    margin-bottom: -2rem;
}

.catalogue {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* grid-auto-rows: 200px; */
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}

.catalogue > div { 
	padding: 1rem;
	border: solid 1px #a55013;
    background-color: #db9d60;
}

.book > a > img {
    border: 1px solid black;
    width: 100%;
    /* aspect-ratio: 3 / 4; */
    background-color: silver;
}

.book > a {
    text-decoration: none;
}

.book > a > div.book-title {
    max-height: 3.5rem;
    overflow: hidden;
    margin-top: .75rem;
    color: #6e350b;
    text-decoration: none;

}

.desc-wrap{
    margin: 1.5rem 0rem;
}

div.img-attr-wrap > div > ul{
    list-style-type: none;  
}
div.img-attr-wrap > div > img{
    min-height: 100%;
}
div.img-attr-wrap{
    /* list-style-type: none; */
    display: grid;
    grid-template-columns: auto 1fr;
    background-color: #ffcc83;
    border-radius: 2rem; 
    line-height: 1.5; 
}
@media (max-width: 767px) {
        /* footer div.grid > div:last-child { text-align: right; } */
    div.img-attr-wrap{
    /* list-style-type: none; */
    grid-template-columns: repeat(1,1fr);
}
        /* .product-card .product-name > *:first-child { font-size: 1.625em; } */
}
@media (min-width: 768px) {
        /* footer div.grid > div:last-child { text-align: right; } */
        .catalogue {
                grid-template-columns: repeat(2, 1fr);
        }

        /* .product-card .product-name > *:first-child { font-size: 1.625em; } */
}
@media (min-width: 1024px) { 
        .catalogue {
                grid-template-columns: repeat(3, 1fr);
        }
        /* .product-card .product-name > *:first-child { font-size: 1.125em; } */
}
@media (min-width: 1280px) {
        .catalogue {
                grid-template-columns: repeat(4, 1fr);
        }
        /* .product-card .product-name > *:first-child { font-size: .875em; } */
}
@media (min-width: 1536px) {
        .catalogue {
                grid-template-columns: repeat(6, 1fr);
        }       
        
        /* .product-name small { font-size: .75em; } */
        /* .product-card .product-name > *:first-child { font-size: .75em; } */
        /* .grid-header { grid-template-columns: 20% 1fr 20%; } 25% auto 25% */
}