.blog-intro { display: block; } .blog-intro > .placeholder { text-align: left; max-width: 49ch; margin: 24px auto 0; } .blog-tools { display: flex; justify-content: flex-end; margin: -16px 0 18px; } .andrea-link { width: fit-content; color: var(--muted); font-size: 12px; text-decoration: none; border-bottom: 1px solid var(--line); } .andrea-link:hover { color: var(--accent); border-bottom-color: currentColor; } .blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; padding: 26px 0 12px; } .article-card { min-width: 0; } .article-cover { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #513c31; color: #fff0d9; text-decoration: none; } .article-cover img { display: block; width: 100%; height: 100%; object-fit: cover; } .article-cover.artwork-cover img { object-fit: contain; } .article-cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #21171308 15%, #2117135c 44%, #211713ed 100%); } .article-cover:hover { color: #fff5e4; } .article-cover:hover::after { background: linear-gradient(180deg, #21171300 15%, #21171345 44%, #211713e6 100%); } .article-cover:focus-visible { outline-offset: 5px; } .article-card-copy { position: absolute; inset: auto 0 0; z-index: 1; padding: 24px 20px; text-align: center; } .article-card-copy .eyebrow { color: #efdab6; font-size: 9px; letter-spacing: .13em; margin-bottom: 11px; } .article-card-copy h2 { font-size: clamp(29px, 2.8vw, 39px); line-height: 1.1; margin: 0 auto 15px; max-width: 16ch; } .article-card-copy .card-action { font-size: 10px; letter-spacing: .04em; } .article-card.is-draft img { filter: saturate(.55); } .blog-note { max-width: 65ch; margin: 25px auto 10px; } .blog-note h2, .blog-note > .eyebrow { text-align: center; } .blog-note .accent-block { margin-block: 30px; } @media (max-width: 960px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 580px) { .blog-grid { grid-template-columns: 1fr; gap: 24px; } .article-card-copy h2 { font-size: 36px; } .blog-tools { margin: -12px 0 22px; } }