.blog-page{margin-top:2rem;&>h1 { margin-bottom: 1rem; } &>p { margin-block: 0.5rem; } .blog-list { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 1.5rem; } .blog-post { background-color: var(--card); color: var(--card-foreground); border: 1px solid var(--border); position: relative; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; transition: transform var(--bezier) 150ms; transform: scale(1); &:hover, &:focus-within { transform: scale(1.005); } } .overlay-link { position: absolute; inset: 0; z-index: 1; } .featured-image-container { height: 100%; display: flex; aspect-ratio: 2 / 1; } .featured-image { pointer-events: none; user-select: none; width: 100%; height: 100%; object-fit: cover; object-position: center; aspect-ratio: 2 / 1; } .post-info { height: 100%; padding: 1rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 1rem; } .post-description { height: 100%; } .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }}