/* @group Card with tag
------------------------------------ */
.card-tag { position: relative; color: var(--white); }
.card-tag .cat-card span,
.card-tag > span { display: inline-block; background-color: rgba(0,0,0,.35); padding: 1.3rem .6rem; font: var(--tag); letter-spacing: var(--tag-letterspacing); text-transform: uppercase; position: relative; z-index: 2; top: 2rem; left: 2rem; }
.card-tag figure, .card-tag picture { border-radius: 0 5rem; height: 49.5rem; display: block;}
.card-tag figure { margin-top: -4.6rem; }

.card-tag figure::before, .card-tag picture::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); z-index: 1;}
.card-tag figcaption { position: absolute; z-index: 2; left: 0; bottom: 6.8rem; padding: 0 3rem 0 2rem; text-align: left; }
.card-tag figcaption h3 { text-transform: uppercase; font: var(--header); letter-spacing: var(--header-letterspacing); margin: 0 0 2rem; }
.card-tag figcaption p { margin: 0 0 2rem; }
.card-tag figcaption time { font-weight: 700; font-size: 1.6em; line-height: 1.2em; letter-spacing: .17em; text-transform: uppercase; }
.card-tag .icon-plus-button { font-size: 4rem; position: absolute; z-index: 2; right: 3rem; bottom: 3rem; }
@media only screen
and (min-width : 961px) {
    .card-tag .cat-card span,
    .card-tag > span { padding: .3rem .6rem .5rem; top: 3rem; left: 2rem; font: 400 2em / 1.4em var(--nobel-font); letter-spacing: 0; }
    .card-tag figure, .card-tag picture { height: 60rem; }
    .card-tag figcaption { bottom: 8.6rem; padding: 0 3rem; }
    .card-tag figcaption h3 { font: var(--header-desktop); margin: 0 0 3.3rem; }
    .card-tag figcaption p { font: 400 2.7em / 1.175em var(--nobel-font); letter-spacing: 0; margin: 0 0 1.175rem; }
    .card-tag figcaption p:last-of-type, 
    .card-tag figcaption p + p { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
    .card-tag figcaption p:last-of-type { margin: 0 0 3rem; -webkit-line-clamp: 4; }
    .card-tag figcaption p + p { -webkit-line-clamp: 3!important; }
    .card-tag .icon-plus-button { right: 4.7rem; bottom: 5rem; transition: color .3s ease; }
    .card-tag:hover .icon-plus-button { color: var(--light-green); }
    
    .card-tag.card-filter .cat-card span,
    .card-tag.card-filter > span { padding: .3rem 2.1rem .5rem; }

    .card-tag .cat-card { position: absolute; }
    .card-tag .cat-card + figure {
        margin-top: 0;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .card-tag.stacked-mobile .cat-card span,
    .card-tag.stacked-mobile > span { left: 3.5rem; padding: .4rem 1.3rem ; }
    .card-tag.stacked-mobile figure, .card-tag.stacked-mobile picture { height: 23rem; }
    .card-tag.stacked-mobile figcaption { bottom: 5rem; padding: 0 3.5rem; }
    .card-tag.stacked-mobile figcaption h3 { font-size: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
    .card-tag.stacked-mobile figcaption p { display: none; }
}

/* @end */

/* Animations / Hover */
.card-tag {
    overflow: hidden;
    border-radius: 0 5rem;
}
.card-tag,
.card-tag img {
    transition: 0.5s;
}
.card-tag:hover {
    box-shadow: 0px 80px 200px rgba(0,0,0,0.25);
}

.card-tag:hover img {
    transform: scale(115%);
}