.reading-item{
    border:1px solid black;
    border-radius:5px;
    background-size: cover;
    background-position: center;
    position:relative;
    display:flex;
    height:300px;
}
.reading-item>div {
    background: rgba(0,0,0,0.8);
    color:white;
    border-radius:0 0 5px 5px;
    padding:1.25em 0.5em 0.75em;
    position:absolute;
    display:flex;
    width:100%;
    bottom:0;
}
.reading-item-grid {
    display:grid;
    gap:0.25em;
    font-size:small;
}
@media screen and (max-width: 599px){
    .reading-item-grid {
        grid-template-columns: repeat(auto-fit, 1fr);
    }
}
@media screen and (min-width: 600px){
    .reading-item-grid {
        grid-template-columns: repeat(auto-fit, 200px);
    }
}
/*
@media screen and (max-width: 699px){
    .reading-item-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
@media screen and (min-width: 700px) and (max-width: 1049px){
    .reading-item-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media screen and (min-width: 1050px) and (max-width: 1399px){
    .reading-item-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media screen and (min-width: 1400px) and (max-width: 1749px){
    .reading-item-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media screen and (min-width: 1750px){
    .reading-item-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}*/