.blog-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-m-l);
    align-items: center;
    margin-inline: max(calc((100% - var(--max-width)) / 2), var(--space-xs-m));
    padding-block: var(--space-m-l);
}

.blog-card {
    width: 100%;

    & a {
        --_clr: var(--clr-surface);

        background: var(--_clr);
        border-radius: var(--space-s);
        color: var(--clr-text);
        display: flex;
        flex-direction: column;
        padding: var(--space-m);
        text-decoration: none;
        transition: transform 0.2s cubic-bezier(0, 0, .2, 1);

        &:hover,
        &:focus,
        &:focus-visible {
            --_clr: var(--clr-muted);
            transform: translateY(calc(-1 * var(--space-3xs)));
        }

        & p {
            margin-block-start: var(--space-xs);
        }

        & span {
            margin-block-start: var(--space-s);
            width: fit-content;
            color: var(--clr-iris);
            display: block;

            &::after {
                content: " →";
                white-space: pre;
            }

            &:hover,
            &:focus,
            &:focus-visible {
                text-decoration-line: underline;
            }
        }
    }
}
