.blog-post-header {
    margin-bottom: 4rem;
}

.blog-post-header-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.blog-post-header-content {
    padding: 0 1rem;
}

.blog-post-breadcrumbs {
    font-size: 1rem;

    .breadcrumb {
        --bs-breadcrumb-color: var(--bs-secondary);
        --bs-breadcrumb-item-active-color: var(--bs-secondary);

        flex-wrap: nowrap;
        overflow: hidden;
    }

    .breadcrumb .breadcrumb-item-2 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.blog-post-title {
    color: var(--mt-darkblue);
    font-weight: bold;
    font-size: 1.5rem;
}

.blog-post-date {
    font-size: 1rem;
}

.blog-post-header-image>img {
    aspect-ratio: 6 / 5;
    width: 100%;
    height: auto;
    object-fit: cover;
}

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

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

.blog-author-details {
    min-width: 0;
}

.blog-author-img {
    width: 50px;
    height: 50px;
}

.blog-author-name {
    color: var(--mt-darkblue);
    font-weight: bold;
}

.blog-author-job-title {
    color: var(--bs-secondary);
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-post-content .wp-block-heading,
.blog-post-h2 {
    font-weight: bold;
    color: var(--mt-darkblue);
    margin-bottom: 1rem;
}

.blog-post-content :where(h1, h2).wp-block-heading {
    padding-left: .5rem;
    border-left: 4px solid var(--cts-lightgreen);
}

.blog-post-content p {
    line-height: 2em;
    margin-bottom: 4rem;
}

.blog-post-content ul,
.blog-post-content ol {
    line-height: 2em;
    margin-bottom: 1.5rem;
}

.blog-post-content .wp-block-image {
    margin-bottom: 2rem;
}

.blog-post-content .wp-block-columns {
    margin-bottom: 4rem;
}

.blog-post-content .wp-block-columns p {
    margin-bottom: 1rem;
}

.blog-post-keep-reading {
    background-color: #f2f2f2;
}

p a {
    color: #282828;
    text-decoration: underline;
}

p a:hover {
    text-decoration: underline;
    text-decoration-color: #43C9F7;
}

@media screen and (max-width: 545.98px) {
    .blog-post-header {
        max-width: 100%;
        padding: 0;
    }
}

@media screen and (min-width: 546px) {
    .blog-post-header-content {
        padding: 0;
    }
}

@media screen and (max-width: 991.98px) {
    .blog-post-header.container {
        max-width: 540px;
    }

    .blog-post-keep-reading .container {
        max-width: 400px;
    }
}

@media screen and (min-width: 992px) {
    .blog-post-header-layout {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0;
        background-color: #f2f2f2;
    }

    .blog-post-header-image {
        order: 1;
        max-height: 450px;
        height: 450px;
        width: auto;
    }

    .blog-post-header-image>img {
        width: auto;
        height: 100%;
    }

    .blog-post-header-content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2em;
    }

    .blog-post-header-content>* {
        min-width: 0;
    }

    .blog-post-title {
        font-size: 1.75rem;
    }

    .blog-author-name {
        font-size: 1.125rem;
        line-height: 1.15em;
    }

    .blog-author-img {
        width: 55px;
        height: 55px;
    }
}

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

@media screen and (min-width: 1400px) {
    .blog-post-header-image {
        max-height: 600px;
        height: 600px;
    }

    .blog-post-title {
        font-size: 2.5rem;
    }

    .blog-author-name {
        font-size: 1.25rem;
    }

    .blog-author-job-title {
        font-size: 1rem;
    }

    .blog-author-img {
        width: 60px;
        height: 60px;
    }

    .container.blog-post-content {
        max-width: 1320px;
        padding-bottom: 1rem;
    }
}