/* Blog Container */
.blog-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px;
}

.blog-content {
    padding: 20px;
    text-align: left; /* Centers the content */
}

.blog-meta {
    margin-bottom: 20px;
    font-size: 1rem;
    color: #555;
    text-align: center; /* Centers the meta information */
}

.blog-meta p {
    margin: 5px 0; /* Adds spacing between stacked lines */
}

/* Blog Hero Image */
.blog-hero-image {
    max-width: 1240px; /* Ensures the hero image does not exceed the page width */
    width: 100%; /* Makes the image responsive */
    margin: 20px auto; /* Adds spacing and centers the image */
    border-radius: 5px; /* Optional: Adds rounded corners */
}

/* Blog Image Block */
.blog-image-block {
    display: flex;
    flex-wrap: wrap; /* Allows images to wrap on smaller screens */
    gap: 10px; /* Adds spacing between images */
    justify-content: center; /* Centers the image block */
    margin: 20px 0;
}

.blog-image-block figure {
    flex: 1 1 calc(33.33% - 10px); /* Ensures images and captions fit in a 3-column layout */
    max-width: calc(33.33% - 10px); /* Prevents images from exceeding their column width */
    text-align: center; /* Centers the caption text */
}

.blog-image-block img {
    width: 100%; /* Ensures images are responsive */
    height: auto; /* Maintains aspect ratio */
    border: 1px solid #ccc; /* Optional: Adds a border */
    border-radius: 5px; /* Optional: Adds rounded corners */
}

.blog-image-block figcaption {
    font-size: 0.9rem; /* Slightly smaller font size for captions */
    color: #555; /* Subtle color for captions */
    margin-top: 5px; /* Adds spacing between the image and caption */
    line-height: 1.4; /* Improves readability */
}

/* Two-Column Layout */
.blog-two-column-layout {
    display: flex; /* Creates a horizontal layout */
    gap: 20px; /* Adds spacing between the image and text */
    align-items: flex-start; /* Aligns items at the top */
    margin: 20px 0;
}

.blog-two-column-layout figure {
    width: 33%; /* Ensures the image and caption take up 33% of the width */
    margin: 0; /* Removes default margin */
}

.blog-two-column-layout img {
    width: 100%; /* Ensures the image is responsive */
    height: auto; /* Maintains aspect ratio */
    border-radius: 5px; /* Optional: Adds rounded corners */
}

.blog-two-column-layout figcaption {
    text-align: left; /* Aligns the caption text to the left */
    margin-top: 5px; /* Adds spacing between the image and caption */
}

.blog-two-column-text {
    width: 67%; /* Text takes up the remaining 67% of the container width */
    font-size: 1rem;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .blog-image-block {
        flex-direction: column; /* Stacks images vertically on smaller screens */
    }

    .blog-image-block figure {
        max-width: 100%; /* Ensures images and captions take up full width */
    }

    .blog-two-column-layout {
        flex-direction: column; /* Stacks image and text vertically */
    }

    .blog-two-column-layout figure,
    .blog-two-column-text {
        width: 100%; /* Both take up full width */
    }
}