body { margin: 0; } .nolist { list-style: none; padding: 0; margin: 0; } .nolist li { display: inline-block; } .scenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); list-style: none; padding: 0; margin: 0; } .scene { display: flex; flex-direction: column; box-sizing: border-box; padding: 0 0 .5rem 0;; border-radius: .25rem; margin: .5rem; overflow: hidden; box-shadow: 0 0 3px rgba(0, 0, 0, .25); } .scene-banner { position: relative; margin: 0 0 .5rem 0; } .scene-thumbnail { width: 100%; height: 200px; display: block; background-position: center; background-size: cover; object-fit: cover; } .scene-row { display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; padding: 0 .5rem; margin: 0 0 .25rem 0; } .scene-details { width: 100%; display: flex; align-items: center; justify-content: space-between; position: absolute; } .scene-site, .scene-date { color: #fff; background: rgba(0, 0, 0, .5); font-size: .8rem; padding: .25rem; text-decoration: none; } .scene-site { border-radius: 0 0 .25rem 0; } .scene-date { border-radius: 0 0 0 .25rem; } .scene-info { flex-grow: 1; } .scene-link { text-decoration: none; } .scene-title { color: #000; margin: 0; font-size: 1rem; word-wrap: break-word; overflow: hidden; max-height: 3rem; line-height: 1.5rem; } .scene-network { color: #555; margin: 0 .25rem 0 0; font-size: .8rem; } .scene-tags { word-wrap: break-word; overflow: hidden; max-height: 2.5rem; line-height: 1.25rem; } .scene-actor, .scene-tag { margin: 0 .25rem 0 0; } .scene-actor { font-size: .9rem; } .scene-tag { font-size: .75rem; } .scene-actor:not(:last-of-type)::after, .scene-tag:not(:last-of-type):after { content: ","; } .actor-link, .tag-link { color: #000; } .thumbnail { width: 300px; }