body{ margin: 0; font-family: Arial, Helvetica, sans-serif; } p{ margin: 0; } .content-grid{ display: grid; gap: 1em; grid-template-columns: repeat(auto-fill, minmax(250px, 1.5fr)); } .video-entry{ background-color: lightgray; border-radius: 5px; padding-bottom: 0.5em; } .video-entry:hover{ box-shadow: black 0 0 5px -1px; } .entry-link{ display: inline-block; /* padding: 0.5em; */ text-decoration: none; color: black; } .entry-content { display: flex; flex-direction: column; gap: 0.1em; } .thumbnail{ display: block; position: relative; border-radius: 5px; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .entry-title{ text-overflow: ellipsis; overflow: hidden; max-width: 100%; height: 3.5rem; font-size: 1rem; font-weight: bold; text-align: left; padding: 0 0.5em 0 0.5em; } .entry-metadata{ margin: 0 0.5em 0 0.5em; /* align-items: center; */ font-size: 1rem; display: grid; grid-template-columns: 1fr 5fr; grid-template-rows: 1fr; } .avatar{ width: 100%; border-radius: 50%; } .entry-channel{ /* display: inline; */ z-index: 1; overflow: hidden; max-width: 100%; height: 1rem; text-align: left; margin-bottom: 0.2rem; grid-column: 2; grid-row: 1; } .entry-date{ }