/************************
POST CARD
************************/
/* DISPLAY MODE: Grid */
.post-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-grid);
}
.post-cards .filter {
    grid-column: span 2;
    order: 1;
}
.post-cards.post-cards--author .filter {
    order: -1;
}
.post-cards:not(.post-cards--author) article:first-of-type {
    grid-column: span 2;
    order: 0;
}
.post-cards:not(.post-cards--author) article:first-of-type .post-card__image {
    height: 350px;
}
.post-cards:not(.post-cards--author) article:not(:first-of-type) {
    order: 2;
}
.post-card {
    background: var(--background-900);
    border-radius: var(--border-radius);
    padding: var(--spacing-grid);
    display: grid;
    gap: var(--spacing-grid);
    color: var(--color-title);
    max-width: 100%;
}
.post-card__image {
    display: block;
    height: 250px;
    overflow: hidden;
    border-radius: calc(.75*var(--border-radius));
    background: var(--background-700);
}
.post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition);
}
.post-card:hover .post-card__image img {
    transform: rotate(-2deg) scale(1.15);
}
.post-card__body {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    position: relative;
}
.post-card__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
[data-date-badge="false"] .post-card__title {
    grid-column: span 2;
}
.post-card__title h2 {
    font-size: var(--font-size-header);
    margin-bottom: var(--spacing-s);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.post-card__body > .post-card__date {
    background: var(--background-700);
    border-radius: calc(.75*var(--border-radius));
    font-weight: bold;
    font-size: var(--font-size-header);
    color: var(--color-title);
    text-align: center;
    width: 4.25rem;
    height: 4.25rem;
    margin-right: var(--spacing-grid);
}
.post-card__body > .post-card__date p {
    margin-bottom: -.5rem;
    margin-top: .9rem;
    color: var(--color-title);
}
.post-card__body > .post-card__date small {
    opacity: .5;
    color: var(--color-text);
}
.post-card__details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-m);
    line-height: 1.5rem;
}
.post-card__author {
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
}
.post-card__author img {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: calc(.5*var(--border-radius));
}
.post-card__details small {
    text-transform: uppercase;
    color: var(--color-text);
    font-weight: bold;
    opacity: .5;
}
.post-card__details small i {
    margin-right: var(--spacing-s);
    transform: translateY(1px);
}
.post-card .fa-circle {
    color: var(--background-700);
    font-size: .5rem;
    transform: translateY(1px);
}
.post-card .badge {
    position: absolute;
    top: 0;
    right: 0;
}
.post-card .badge i {
    margin: 0;
}
.post-card__tags {
    display: none;
    margin-bottom: var(--spacing-s);
}
/* DISPLAY MODE: List */
[data-display-mode="list"].post-cards {
    grid-template-columns: 1fr;
}
[data-display-mode="list"].post-cards .filter {
    grid-column: initial;
}
[data-display-mode="list"].post-cards article:first-of-type {
    grid-column: initial;
}
[data-display-mode="list"] article:not(:first-of-type) .post-card, [data-display-mode="list"].post-cards--author article .post-card {
    grid-template-columns: auto 1fr;
}
[data-display-mode="list"] article:not(:first-of-type) .post-card__image, [data-display-mode="list"].post-cards--author article .post-card__image {
    width: 160px;
    height: 100%;
}
[data-display-mode="list"] article:not(:first-of-type) .post-card__image img, [data-display-mode="list"].post-cards--author article .post-card__image img {
    height: 100%;
}
[data-display-mode="list"] article:not(:first-of-type) .post-card__title, [data-display-mode="list"].post-cards--author article .post-card__title {
    position: initial;
}
[data-display-mode="list"] article:not(:first-of-type) .post-card__tags, [data-display-mode="list"].post-cards--author article .post-card__tags {
    display: flex;
    gap: var(--spacing-s);
    grid-column: span 2;
}
@media only screen and (max-width: 1200px) {
    .post-cards {
        grid-template-columns: 1fr;
    }
    .post-cards .filter, .post-cards:not(.post-cards--author) article:first-of-type {
        grid-column: initial;
    }
}
@media only screen and (max-width: 1000px) {
    [data-display-mode="list"] article:not(:first-of-type) .post-card, [data-display-mode="list"].post-cards--author article .post-card {
        grid-template-columns: 1fr;
    }
    [data-display-mode="list"] article:not(:first-of-type) .post-card__image, [data-display-mode="list"].post-cards--author article .post-card__image {
        display: none;
    }
}
@media only screen and (max-width: 520px) {
    .post-cards {
        gap: var(--spacing-m);
    }
}