.item-box,
.item-box:hover {
    transition: .3s ease-in-out
}

.c3card__calender::before,
.c3card__eye::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 4px;
    color: var(--site-color)
}

.blog,
.c3card__calender,
.c3card__eye {
    position: relative
}

.blog-card-3c-title,
.blog-h {
    line-height: 1.5rem;
    font-weight: 500
}

.blog-card-3c {
    background: linear-gradient(135deg, #fff 21px, rgba(236, 236, 236, .62) 22px, rgba(236, 236, 236, .62) 24px, transparent 24px, transparent 67px, rgba(236, 236, 236, .62) 67px, rgba(236, 236, 236, .62) 69px, transparent 69px), linear-gradient(225deg, #fff 21px, rgba(236, 236, 236, .62) 22px, rgba(236, 236, 236, .62) 24px, transparent 24px, transparent 67px, rgba(236, 236, 236, .62) 67px, rgba(236, 236, 236, .62) 69px, transparent 69px) 0 64px;
    background-color: #fff;
    background-size: 64px 128px
}

.blog-card-3c-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: var(--site-color);
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0
}

.blog-card-3c-title {
    margin: 0 0 12px;
    display: block;
    font-size: 1.45rem;
    color: #fff
}

.blog-card-3c-header p {
    color: #fff
}

.blog-card-3c-title a {
    text-decoration: none
}

.blog-card-3c-title a:hover {
    text-decoration: underline
}

.blog-card-3c-card-body {
    padding: 1.25rem;
    position: relative
}

.item-box:hover {
    border: 1px solid gray;
    box-shadow: 0 4px 10px rgba(255, 186, 186, .3)
}

.c3card__footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.c3card__calender::before {
    content: '\f073'
}

.card__eye::before {
    content: '\f06e'
}

.c3card__calender[data-title]:after {
    background-color: #fff;
    color: var(--date-color, #dc3545);
    font-size: 11px;
    padding: 3px 8px;
    bottom: 2em;
    transform: translateX(-50%);
    border: 1px solid var(--date-color, #dc3545)
}

.card__eye[data-title]:after {
    background-color: var(--views-bg, #f8f9fa);
    color: var(--views-color, #dc3545);
    font-size: 12px;
    padding: 4px 10px;
    bottom: 2em;
    right: -56px;
    transform: translateX(-50%);
    border: 1px solid var(--views-color, #dc3545)
}

[data-title]:after {
    content: attr(data-title);
    position: absolute;
    white-space: nowrap;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    opacity: 0;
    visibility: hidden;
    z-index: 99
}

[data-title]:hover:after {
    visibility: visible;
    opacity: 1;
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out
}

@media (max-width:768px) {
    .blog-h {
        height: auto
    }
}

.blog {
    display: flex;
    flex-direction: column;
    height: 100%
}

.blog img {
    aspect-ratio: 3/2;
    border-radius: 3px 3px 0 0;
    width: 100%;
    height: auto
}

.blog-h {
    font-size: 1rem;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 10px 0;
    padding: 0 10px
}

.c3card__footer {
    display: flex;
    justify-content: space-between;
    font-size: .775rem;
    font-weight: 500;
    padding: 10px;
    color: #505050;
    border-top: .2px solid #d7d7d7;
    margin-top: auto
}

.h-100 {
    height: 100% !important
}

.card__eye::before {
    content: '\f06e';
}

.c3card__calender::before,
.card__eye::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 4px;
    color: var(--site-color);
}