/* Card style 04: Outline. Square corners, a thin outline and no fill; quiet and editorial. */
.card-style-04 .card.post-card {
    padding: 16px;
    border: 1px solid rgba(46, 62, 78, .22);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: border-color .2s ease;
}

.card-style-04 .post-card .card-img-top {
    border-radius: 0;
    filter: grayscale(.35);
    transition: filter .3s ease;
}

.card-style-04 .post-card .card-title {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .01em;
}

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

.card-style-04 .post-card .about-card-btn {
    padding: 0 0 2px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cs-ink);
    background: none;
    border: 0;
    border-bottom: 2px solid var(--cs-accent);
    border-radius: 0;
}

@media (hover: hover) and (pointer: fine) {
    .card-style-04 .card.post-card:hover {
        border-color: var(--cs-ink);
    }

    .card-style-04 .card.post-card:hover .card-img-top {
        filter: none;
    }

    .card-style-04 .post-card .about-card-btn:hover {
        color: var(--cs-accent);
        background: none;
        border-color: var(--cs-accent);
    }
}

.dark .card-style-04 .card.post-card {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .25);
}

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

.dark .card-style-04 .post-card .about-card-btn {
    color: #fff;
}

@media (hover: hover) and (pointer: fine) {
    .dark .card-style-04 .card.post-card:hover {
        border-color: rgba(255, 255, 255, .6);
    }
}