/* Blog Posts Page Styles */
/* .blog main {
    padding-top: 90px;
} */
.blog {
    background-color: #000;
    color: #fff;
}

.blog article .entry-summary {
    background-color: var(--secondary);
    padding: 1rem;
    color: var(--light);
    font-weight: 400;
}

.blog article {
    /* position: relative; */
    /* margin: 0 15px 1.5rem 15px !important; */
}

article:hover {
    -webkit-animation: hover 1.5s;
    animation: hover 1.5s;
}

/* HOVER */
@-webkit-keyframes hover {
    50% {
        transform: translateY(-6px);
    }
}

@keyframes hover {
    50% {
        transform: translateY(-5px);
    }
}


.blog article .entry-summary .post-meta-field {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.blog article .entry-summary span.label {
    font-weight: bold;
}

.blog article .entry-summary .post-meta-field.post-sold {
    justify-content: center;
    font-size: 1.25rem;
}

@media (min-width: 768px) {
    .blog .blog-articles-row {
        /* display: flex;
        flex-wrap: wrap;
        column-count: 3;
        column-gap: 1em; */
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 10px;
        grid-auto-flow: row dense;
        gap: 1em;
        align-items: start;
        min-height: 100vh;
    }

    .blog article {
        break-inside: avoid;
        display: block;
        width: 100%;
        /* Auto-size based on content height */
        grid-row-end: span var(--grid-row-span);
        /* width: calc(50% - 30px); */
    }

    /* .blog article picture {
        display: block;
        width: 100%;
        height: 400px;
        overflow: hidden;
        background: #222;
    } */

    /* .blog article picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    } */

    .blog article .entry-summary {
        display: none;
    }

    .blog article:hover .entry-summary {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        opacity: 90%;
    }

    .blog article .entry-summary:has(.sold-label) {
        /* display: block !important;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        opacity: 90%; */
        background-color: var(--dark);
    }
}

@media (min-width: 992px) {}

@media (min-width: 1200px) {
    .blog article {
        /* width: calc(33% - 30px); */
    }
}