.module-blog-post {
    /* any general styling for the module */
    padding-bottom:6rem;
    padding-top:3rem;
}

.module-blog-post .breadcrumbs.mobile {
    padding-bottom:5rem;
}

.module-blog-post .breadcrumbs.mobile ol {
    justify-content: center;
}

.module-blog-post .breadcrumbs.mobile i,
.module-blog-post .breadcrumbs.mobile li,
.module-blog-post .breadcrumbs.mobile a {
    color:#fff;
}

.module-blog-post .blog-header {
    background:var(--dark-orange);
    background-image: var(--background-orange-dots);
    background-repeat: no-repeat;
    background-size: 250px;
    background-position: center right;
    padding:4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    width:calc(100% - 4rem);
    margin:0 auto;
}

.module-blog-post .blog-header h1,
.module-blog-post .blog-header h2  {
    color:#fff;
    margin:0;
    text-align: center;
}

.module-blog-post .blog-header .info {
    display: flex;
    justify-content: center;
    gap:2rem;
    align-items: center;
    margin-top:4rem;
}

.module-blog-post .blog-header .info .divider {
    width:2px;
    background-color:#000;
    height:100%;
}

.module-blog-post .content {
    margin-top:5rem;
    padding:0px 2rem;
}

.module-blog-post .breadcrumbs li.active {
    display:none;
}

.module-blog-post .related-posts-wrapper .content {
    margin-top:0;
    padding:0;
}

.module-blog-post .related-posts-wrapper {
    position: relative;
    margin-top:7rem;
    padding:0px 2rem;
}

.module-blog-post .related-posts-wrapper .heading {
    padding-left:2rem;
}

.module-blog-post .related-posts-wrapper .heading:before {
    content:url('/images/cho-dot-arrow.svg');
    display: block;
    position: absolute;
    left:2rem;
    top:-2px;
}

.module-blog-post .content img {
    border-radius: 10px;
    max-width: 100%;
    /* override and display full width on mobile */
    float: none;
    margin-top: 15px; /* Add spacing to the left */
    margin-bottom: 15px; /* Add spacing below */
    width:100%;
    height:auto;
}

.module-blog-post .content img[style*="float: right"] {
    float: none;
}

.module-blog-post .content img[style*="float: left"] {
    float: none;
}

@media (min-width:1200px) {

    .module-blog-post .related-posts-wrapper .heading {
        padding-left:0;
    }
    .module-blog-post .related-posts-wrapper .heading:before {
        left:-1rem;
        top:0;
    }

    .module-blog-post .content img[style*="float: right"] {
        float:right;
        max-width: 40%; /* Make it responsive */
        margin-left: 35px; /* Add spacing to the left */
        margin-bottom: 35px; /* Add spacing below */
        height: auto; /* Maintain aspect ratio */
    }
    
    .module-blog-post .content img[style*="float: left"] {
        float: left; /* Ensure it's aligned to the right */
        margin-right: 35px; /* Add spacing to the left */
        margin-bottom: 35px; /* Add spacing below */
        max-width: 40%; /* Make it responsive */
    }
}