.blog-archive-header-layout {
    display: grid;
    align-items: center;
    background-color: #f2f2f2;
}

.blog-archive-title {
    padding: 2rem 1rem;
}

.blog-archive-featured-image>img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
}

.blog-archive-featured-content {
    padding: 1rem;
}

.blog-archive-heading {
    font-weight: bold;
    color: var(--mt-darkblue);
    padding-left: .5rem;
    border-left: 4px solid #1de883;
    margin-bottom: 1rem;
}

h1.blog-archive-heading {
    margin: 0;
    font-size: 1.75rem;
}

.blog-archive-featured-title {
    color: var(--mt-darkblue);
}

.blog-tag {
    padding: .25rem 1rem;
    border-radius: .25rem;
    font-size: 1rem;
    font-weight: bold;
}

.blog-tag.blog-tag-featured {
    background-color: var(--cts-lightgreen);
    color: var(--cts-darkgreen);
}

.post-date {
    font-size: .85rem !important;
}

@media screen and (min-width: 425px) {
    .blog-archive-title {
        padding: 2rem;
    }

    .blog-archive-featured-content {
        padding: 2rem;
    }
}

@media screen and (min-width: 768px) {
    .blog-archive-title {
        padding: 4rem 2rem 2rem 2rem;
    }
}

@media screen and (min-width: 992px) {
    .blog-archive-header-layout {
        grid-template-rows: auto 1fr;
        grid-template-columns: 1fr auto;
    }

    .blog-archive-title {
        grid-column: 1;
        grid-row: 1;
    }

    .blog-archive-featured-image {
        grid-column: 2;
        grid-row: 1 / 3;
    }

    .blog-archive-featured-title {
        font-size: 1.5rem;
    }

    .blog-archive-featured-image>img {
        width: auto;
        height: 500px;
        max-height: 500px;
        object-fit: cover;
        object-position: center center;
        aspect-ratio: 7 / 6;
        padding: 2rem 2rem 2rem 0;
    }

    .blog-archive-featured-content {
        grid-column: 1;
        grid-row: 2;
    }
}

@media screen and (min-width: 1200px) {
    .blog-archive-featured-title {
        font-size: 2rem;
    }

    .blog-archive-featured-image>img {
        width: auto;
        height: 600px;
        max-height: 600px;
        object-fit: cover;
        object-position: center center;
        aspect-ratio: 7 / 6;
        padding: 2rem 2rem 2rem 0;
    }
}