.list-content{& a { text-decoration: none; color: white; &:hover { color: white; } } & .preview { margin-bottom: 0.5rem; padding: 1rem; border-radius: 0.75rem; &:hover { background: linear-gradient(to top, #a7f3d0, #dcfce7); } @media (prefers-color-scheme: dark) { &:hover { background: linear-gradient(to top, #064e3b, #047857); } } & .contentPreviewContainer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } & #previewImage { grid-column: span 1 / span 1; display: none; @media (min-width: 768px) { display: flex; justify-content: center; align-items: center; } & svg { width: 50%; height: auto; color: black; @media (prefers-color-scheme: dark) { color: white; } } & img { width: 100%; height: auto; border-radius: 0.5rem; } } & #previewSection { grid-column: span 3 / span 3; display: flex; flex-direction: column; justify-content: center; @media (min-width: 768px) { grid-column: span 2 / span 2; } } & p.title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; margin-top: 0; display: flex; align-items: center; & svg { width: 2rem; height: 2rem; margin-right: 1rem; display: inline-block; } } & p.description { font-size: 1rem; line-height: 1.5rem; margin-bottom: 0.5rem; } & time { font-size: 1rem; line-height: 1.5rem; } }}