:root {
    --h3-font-size: 18px;
}

@media (min-width: 768px) {
    :root {
        --h3-font-size: 28px;
    }
}


@media screen and (min-width: 768px) and (max-width: 991px) {
    .body-container--blog-post {
    }
}

@media screen and (min-width: 992px) {
    .body-container--blog-post {
    }
}

.blog-post h1 {
    color: rgba({{ theme.blog.post_page.header.post_title_color.color|convert_rgb }}, {{ theme.blog.post_page.header.post_title_color.opacity / 100 }});
    font-size: {{ theme.blog.post_page.header.post_title_size_mobile }}px;
}

@media (min-width: 768px) {
    .blog-post h1 {
        font-size: {{ theme.blog.post_page.header.post_title_size }}px;
    }
}


{% if theme.blog.post_page.header.read_time %}
    .blog-post__readtime {
        color: rgba({{ theme.blog.post_page.header.read_time_color.color|convert_rgb }}, {{ theme.blog.post_page.header.read_time_color.opacity / 100 }});
        margin-bottom: 0;
    }
{% endif %}

.blog-post__meta {
    color: rgba({{ theme.blog.post_page.header.author_color.color|convert_rgb }}, {{ theme.blog.post_page.header.author_color.opacity / 100 }});
    padding: var(--grid-gutter) 0;
}

.blog-post__tags {
    margin-bottom: var(--grid-gutter);
    margin-top: var(--grid-gutter);
}

.blog-post__tags .badge {
    display: inline-block;
    padding-right: calc(var(--grid-gutter) * 2 - 1px);
    padding-left: calc(var(--grid-gutter) * 2 - 1px);
    padding-top: calc(0.375rem - 1px);
    padding-bottom: calc(0.375rem - 1px);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border: 1px solid rgba({{ theme.blog.post_page.header.tags_background_color.color|convert_rgb }}, {{ theme.blog.post_page.header.tags_background_color.opacity / 100 }});
    font-size: {{ theme.blog.post_page.header.tags_font_size }}px;
    color: rgba({{ theme.blog.post_page.header.tags_text_color.color|convert_rgb }}, {{ theme.blog.post_page.header.tags_text_color.opacity / 100 }});
    background: rgba({{ theme.blog.post_page.header.tags_background_color.color|convert_rgb }}, {{ theme.blog.post_page.header.tags_background_color.opacity / 100 }});
    border-radius: 10rem;
}

.blog-post__tags .badge:hover,
.blog-post__tags .badge:focus {
    border: 1px solid rgba({{ theme.blog.post_page.header.tags_hover_background_color.color|convert_rgb }}, {{ theme.blog.post_page.header.tags_hover_background_color.opacity / 100 }});
    color: rgba({{ theme.blog.post_page.header.tags_hover_text_color.color|convert_rgb }}, {{ theme.blog.post_page.header.tags_hover_text_color.opacity / 100 }});
    background: rgba({{ theme.blog.post_page.header.tags_hover_background_color.color|convert_rgb }}, {{ theme.blog.post_page.header.tags_hover_background_color.opacity / 100 }});
}

.blog-post__body {
    color: rgba({{ theme.blog.post_page.content_area.color.color|convert_rgb }}, {{ theme.blog.post_page.content_area.color.opacity / 100 }});
    font-size: {{ theme.blog.post_page.content_area.font_size }}px;
    max-width: {{ theme.blog.post_page.content_area.post_width }}px;
}


.blog-post__body h1,
.blog-post__body h2,
.blog-post__body h3,
.blog-post__body h4,
.blog-post__body h5,
.blog-post__body h6 {
    color: rgba({{ theme.blog.post_page.content_area.headline_color.color|convert_rgb }}, {{ theme.blog.post_page.content_area.headline_color.opacity / 100 }});
}

.blog-related__posts {
    
    position: relative;
}

.blog-related__posts .card__body {
    background: transparent;
    color: #000000;
    font-size: 16px;
}

.blog-related__posts .card {
    background: rgba(217,218,220, 0.3);
    height: auto;
    width: 320px;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
    border: 0;
}

.blog-related__posts .card .card__title {
    font-size: 24px;
}
.blog-related__posts .card .card__title a {
    color: #008BC6;
}

.blog-related__posts .card .card__title:hover a,
.blog-related__posts .card .card__title:focus a {
    color: #008BC6;
}

.blog-related__posts .blog__listing-timestamp {
    color: #000;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 0;
}

{% if theme.blog.post_page.related.card_show_author %}
.blog__listing-author-name {
    color: rgba({{ theme.blog.post_page.related.card_author_color.color|convert_rgb }}, {{ theme.blog.post_page.related.card_author_color.opacity / 100 }});
    display: inline-block;
    font-size: 14px;
    margin-bottom: var(--grid-gutter);
}
{% endif %}

.blog-index__post-tags {
    position: absolute;
    bottom: 0;
    top: auto;
    right: auto;
    left: 0;
    background: var(--primary);
    color: #fff;
}

.blog__listing-more {
}


.blog-related__posts .badge {
    display: inline-block;
    padding-right: calc(var(--grid-gutter) * 1 - 1px);
    padding-left: calc(var(--grid-gutter) * 1 - 1px);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    line-height: 1;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}

.blog-related__posts .swiper-button-next,
.blog-related__posts .swiper-rtl .swiper-button-prev {
    right: 0;
}

.blog-related__posts .swiper-button-prev,
.blog-related__posts .swiper-rtl .swiper-button-next {
    left: 0;
}

@media (min-width: 1240px) {
    .blog-related__posts .swiper-button-next,
    .blog-related__posts .swiper-rtl .swiper-button-prev {
        right: calc((50% - (var(--max-container-width) / 2)) - var(--swiper-navigation-size));
    }

    .blog-related__posts .swiper-button-prev,
    .blog-related__posts .swiper-rtl .swiper-button-next {
        left: calc((50% - (var(--max-container-width) / 2)) - var(--swiper-navigation-size));
    }
}