body { font-family: system-ui, sans-serif; margin: 0; color: #17212b; } header { display: flex; align-items: center; gap: 2rem; padding: 1rem 2rem; border-bottom: 1px solid #d6dee4; } nav { display: flex; flex-wrap: wrap; gap: 1.5rem; } nav a { color: #145a86; } main { max-width: 72rem; margin: 2rem auto; padding: 0 2rem; } #newer-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; } #newer-controls select, #newer-controls button { font: inherit; padding: .35rem .6rem; } .episode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; } .episode-card { border: 1px solid #d6dee4; border-radius: .5rem; overflow: hidden; } .episode-card a { color: inherit; text-decoration: none; } .episode-card a:hover h2 { text-decoration: underline; } .episode-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #e5ebef; } .episode-copy { padding: .8rem 1rem; } .episode-copy h2 { font-size: 1.1rem; margin: 0 0 .4rem; } .episode-copy p { margin: .3rem 0; }