.blog {
    .blog__item {
        margin-bottom: 1.25rem;
    }

    .blog__tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0.375rem 0;
        gap: 0.5rem;

        > a {
            --btn-padding: 0.5rem;
            @media (hover: hover) {
                &:hover {
                    --btn-bg-color: var(--color-primary);
                    --btn-color: var(--color-white);
                }
            }
            @media (hover: none) {
                &:active {
                    --btn-bg-color: var(--color-primary);
                    --btn-color: var(--color-white);
                }
            }
        }
    }

    .content__tile-body {
        .link {
            color: var(--color-primary);
        }

        @media (hover: hover) {
            .link:hover {
                text-decoration: underline;
            }

            > a:hover {
                color: var(--color-primary);
            }
        }
    }
}

.content__blog-categories {
    .blog__nav {
        border-radius: 1rem;
        margin: 0 1rem;
        padding: 1rem;
        position: sticky;
        top: calc(var(--header-height) + 1rem);
        background-color: var(--color-white);
        border: 1px solid var(--color-gray);
        text-align: center;

        > div:not(:last-child) {
            margin-bottom: 3rem;
        }
    }

    .blog__nav-header {
        color: var(--color-primary);
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .blog__nav-subheader {
        font-size: 1.1rem;
    }

    .blog__nav-item + .blog__nav-subheader {
        margin-top: 1rem;
    }

    .blog__nav-item {
        font-weight: 500;
        margin: 0.25rem 0.25rem 0.25rem 0;
    }

    @media (min-width: 768px) {
        width: 40%;

        .blog__nav {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
            text-align: inherit;

            > div:not(:last-child) {
                margin-bottom: 0;
            }
        }

        .blog__nav {
            margin-right: 0;
        }
    }
}