.blog-menu {
    display: flex;
    gap: 0.5rem;

    > a {
        border: 1px solid var(--neutral-darkest);
        color: var(--neutral-darkest);
        padding: 0.75rem 1.5rem;
        border-radius: 1rem;
        transition: 0.5s;
        &:hover {
            background: var(--neutral-darkest);
            color: white;
        }
        &.selected {
            background: var(--secondary);
            color: white;
        }
    }
}

.blog_list {
    display: grid;
    gap: 2rem;
    margin: 2rem 0;

    @media (min-width: 512px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 1024px) {
        grid-template-columns: repeat(4, 1fr);
    }
}