.list-content{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;& a { flex-shrink: 0; display: block; width: 100%; text-decoration: none; color: white; &:hover { color: white; } @media (min-width: 768px) { width: 500px; } } & .preview { max-height: 300px; margin: 1rem; padding: 1rem; border-radius: var(--radius-md); border: 4px solid var(--color-border); transition: border-color 0.2s; &:hover { border-color: var(--color-border-hover); } & .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: var(--color-svg); } & img { width: 100%; height: auto; border-radius: var(--radius-sm); } } & #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; } }}