@media (hover: hover) and (pointer: fine) {
    .blog-index-list .blog-card:hover {
        border-color: #d8e4eb;
        box-shadow: 0 8px 28px rgba(24, 59, 86, .06);
    }

    .blog-index-list .blog-card-featured:hover {
        border-color: var(--color-5-1);
    }

    .blog-index-list .blog-card:hover .blog-featured-label {
        background: var(--color-4-1);
    }

    .blog-index-list .blog-card:hover h2 a,
    .blog-index-list .blog-card:hover .blog-read-more {
        color: var(--color-4-3);
    }

    .blog-index-list .blog-card:hover .blog-read-more {
        border-color: var(--color-4-1);
    }

    .blog-index-list .blog-card:hover .blog-category {
        color: #526b7d;
    }
}

.blog-tag-page .blog-tag-hero {
    border: 0;
    background: #fff;
    box-shadow: 0 8px 28px rgba(24, 59, 86, .06);
}

.blog-tag-page .blog-tag-hero .fp-main-title {
    font-size: clamp(1.8rem, 4vw, 3.35rem);
}

.blog-tag-page .blog-tag-hero .fp-hero-badges {
    max-width: 680px;
}

.blog-tag-page .blog-tag-hero .fp-badge {
    border-color: #d8e4eb;
}

.blog-tag-page .blog-section-intro {
    margin-top: 2rem;
}

.blog-tag-page .fp-closing {
    border: 0;
    background: #fff;
    box-shadow: 0 8px 28px rgba(24, 59, 86, .06);
}

.blog-index-list .blog-pagination a:hover {
    border-color: var(--color-4-1);
    background: var(--color-4-1);
    color: #fff;
}

.blog-index-list .blog-pagination a.active,
.blog-index-list .blog-pagination a.active:hover {
    border-color: var(--color-5-3);
    background: var(--color-5-3);
    color: #fff;
}