/* Card style 08: Gradient border. A two-colour border from the theme colours and a gradient button. */
.card-style-08 .card.post-card {
    --cs-08-fill: #fff;
    padding: 14px;
    border: 2px solid transparent;
    border-radius: 18px;
    background: linear-gradient(var(--cs-08-fill), var(--cs-08-fill)) padding-box,
    linear-gradient(135deg, var(--cs-accent), var(--cs-ink)) border-box;
    box-shadow: none;
    transition: box-shadow .25s ease;
}

.card-style-08 .post-card .card-img-top {
    border-radius: 12px;
}

.card-style-08 .post-card > .mt-3 {
    padding: 0 6px 4px;
}

.card-style-08 .post-card .card-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.card-style-08 .post-card .card-text {
    color: #5f6b76;
    font-size: .95rem;
}

.card-style-08 .post-card .about-card-btn {
    padding: .45rem 1.1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--cs-accent), var(--cs-ink));
    border: 0;
    border-radius: 10px;
}

@media (hover: hover) and (pointer: fine) {
    .card-style-08 .card.post-card:hover {
        box-shadow: 0 10px 30px color-mix(in srgb, var(--cs-accent) 30%, transparent);
    }

    .card-style-08 .post-card .about-card-btn:hover {
        color: #fff;
        background: linear-gradient(135deg, var(--cs-ink), var(--cs-accent));
    }
}

.dark .card-style-08 .card.post-card {
    --cs-08-fill: #141d26;
    background: linear-gradient(var(--cs-08-fill), var(--cs-08-fill)) padding-box,
    linear-gradient(135deg, var(--cs-accent), color-mix(in srgb, var(--cs-accent) 30%, #fff)) border-box !important;
}

.dark .card-style-08 .post-card .card-text {
    color: rgba(255, 255, 255, .72);
}