.landing-grid-layout {
    --card-min-width: 280px;
    --card-min-height: 110px;

    --blog-post-margin: 10px;

    --card-min-content-width: calc(var(--card-min-width) - 2 * var(--blog-post-margin));
    --card-min-content-height: calc(var(--card-min-height) - 2 * var(--blog-post-margin));

    display: grid;
    margin-bottom: 150px;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr; /* Showing 12 posts per page */
    justify-content: space-between;
    align-content: space-between;
}

.blog-post-card {
    position: relative;
    min-width: var(--card-min-content-width);
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin: var(--blog-post-margin);
    box-shadow: #00000030 0px 8px 8px -2px;
    transition: transform 0.15s ease-out;
    user-select: none;
    color: var(--clr-secondary);
}

.blog-post-card:hover {
    transform: scale(1.08);
}

.blog-post-card:active {
    transform: scale(1.03);
}

.blog-post-card-big {
    min-width: calc(2 * var(--card-min-width) - 2 * var(--blog-post-margin));
    grid-area: span 2 / span 2;

    aspect-ratio: unset;
}

.landing-grid-layout a:last-child {
    aspect-ratio: 16 / 9;
}

.blog-post-card-big:hover {
    transform: scale(1.03);
}

.blog-post-card-big:active {
    transform: scale(1.015);
}

.blog-post-card-stack {
    position: absolute;
    width: 100%;
    height: 100%;
}

.blog-post-card-thumbnail {
    z-index: 1;
    object-fit: cover;
}

.blog-post-card > .blog-post-card-thumbnail-opacity {
    z-index: 2;
    background: #000000;
    opacity: 0%;

    transition: opacity 0.2s ease-out;
}

.blog-post-card:hover > .blog-post-card-thumbnail-opacity {
    opacity: 30%;
}

.blog-card-details {
    z-index: 2;
    height: 100%;

    background: linear-gradient( 
        #F1F1F100 40%,
        #F1F1F160 60%,
        #F1F1F1B3 68%,
        #F1F1F1E6 85%,
        #F1F1F1F0 96%
    );
}

.blog-card-details-big {
    background: linear-gradient( 
        #F1F1F100 40%,
        #F1F1F160 70%,
        #F1F1F1B3 77%,
        #F1F1F1E6 85%,
        #F1F1F1F0 96%
    );
}

.blog-card-details-container {
    --details-height: 40%;
    --details-height-big: 40%;
    
    bottom: 0px;
    height: var(--details-height);
    padding: 10px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    justify-content: end;
}

.blog-card-details-container-big {
    height: var(--details-height-big);
    padding: 20px;
}

.blog-card-text {
    position: relative;
}

.blog-card-title {
    font-size: 16pt;
}
.blog-card-title-big {
    font-size: 24pt
}

.blog-card-tags {
    color: var(--clr-accent-2);
    font-size: 10pt;
    font-weight: 300;
}

.blog-card-tags-big {
    font-size: 12pt;
}

.blog-card-description {
    color: var(--clr-tertiary);
    font-weight: 300;
    display: none;
}

.blog-card-description-big {
    display: block;
}

.search-context-container {
    display: flex;
    margin-bottom: 20px;
    font-size: 12pt;
    color: var(--clr-accent-1);
}

.search-context {
    font-weight: 200;
    padding-right: 10px;
}

.search-context-text {
    font-weight: 300;
    color: var(--clr-accent-2);
}

@media (max-width: 1300px) {
    .blog-card-description-big {
        font-size: 10pt;
    }
}

/*  Styling grid layout when grid layout cannot fit three columns... */
/* Max width should be equal to the max width of content-layout */
@media (max-width: 1100px) {
    .landing-grid-layout {
        grid-template-columns: repeat(2, 1fr);
        --blog-post-margin: 5px;
    }

    /* Ensure that big blog post has a specified height. (Because cannot infer height from aspect ratio if there are no other elements in its row)*/
    .blog-post-card-big {
        aspect-ratio: 16/9;
    }

    .blog-card-title-big {
        font-size: 20pt;
    }

    .blog-card-description-big {
        font-size: 12pt;
    }
}

@media (max-width: 850px) {
    .blog-card-description-big {
        font-size: 10pt;
    }

    .blog-card-title {
        font-size: 12pt;
    }

    .blog-card-tags {
        font-size: 9pt;
    }
}

/* Styling grid layout when grid layout cannot fit two columns... */
/* Max width should be equal to 2 * card-min-width * 1 // main-content-growth (by default main-content-growth = 80% of total body) */
@media (max-width: 700px) {
    .landing-grid-layout {
        grid-template-columns: 1fr;
        --blog-post-margin: 5px;
    }

    .blog-post-card {
        min-width: 0px;
    }

    .blog-post-card-big {
        grid-area: span 1 / span 1;
    }

    .blog-card-description-big {
        display: none;
    }

    .blog-card-title {
        font-size: 15pt;
    }

    .blog-card-tags {
        font-size: 10pt;
    }
}

@media (max-width: 550px) {
    .blog-card-title,
    .blog-card-title-big
    {
        font-size: 14pt; 
    }

    .blog-card-tags {
        font-size: 9pt;
    }
}

@media (max-width: 350px) {
    .blog-card-title,
    .blog-card-title-big {
        font-size: 10pt;
    }

    .blog-card-tags,
    .blog-card-tags-big {
        font-size: 8pt;
    }
}