/* Styles for the main container */
.three-column-layout-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: left; /* Distribute columns evenly with space between */
    column-gap: 30px;
    align-items: flex-start; /* Stretch items to equal height */

    margin-top: 40px;
    padding-top:40px;
    border-top: 1px solid #043645;

    margin-bottom: 25px;
    padding-bottom:25px;
    border-bottom: 1px solid #043645;
}

/* Styles for each post container */
.three-column-post {
    width: calc(33.33% - 20px); /* Adjust the width and margin as needed */
    margin-bottom: 0px;
    box-sizing: border-box !important; /* Include padding and border in the box sizing */
    display: flex;
    flex-direction: column;
    background-color: #fff; /* Optional: Background color for each post */
}

/* Styles for the image container */
.three-column-image {
    flex: 0 0 calc(50%); /* Make image container take full width */
    overflow: hidden;
    margin-bottom: 20px;
}

/* Styles for the content container */
.three-column-content {
    flex: 1; /* Allow content container to take full available height */
    box-sizing: border-box !important;
    display: flex;
    flex-direction: column;
}

/* Styles for the image itself */
.three-column-image img {
    width: 100%;
    height: 300px !important; /* Make the image fill its container */
    object-fit: cover;
}

/* Styles for the post title */
.three-column-content h3 {
    color: var(--e-global-color-primary);
    font-family: var(--e-global-typography-427c31b-font-family), Sans-serif;
    font-size: var(--e-global-typography-427c31b-font-size);
    font-weight: var(--e-global-typography-427c31b-font-weight);
    line-height: var(--e-global-typography-427c31b-line-height);
    letter-spacing: var(--e-global-typography-427c31b-letter-spacing);
    word-spacing: var(--e-global-typography-427c31b-word-spacing);
}

/* Styles for the post content */
.three-column-content p {
    font-size: 1rem;
    color: #212529;
    text-align: left;
    margin-bottom: 10px;
    line-height: 1.5;
    word-wrap: break-word;
}

/* Styles for the post meta (date and categories) */
.three-column-content .post-meta .date {
    color: #9BA2A8;
}

.three-column-content .post-meta .terms {
    color: #1ED5E2;
    font-weight: bold;
}

.three-column-content .post-meta .terms a {
    color: #1ED5E2;
    font-weight: bold;
}
.three-column-content .post-meta {
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    margin-top: 10px;
}

/* Responsive Styles for Mobile and Tablet */
@media (max-width: 768px) {
    .three-column-post {
        width: 100%; /* Make each column take 100% width on smaller screens */
    }

    .three-column-content .post-meta {
        margin-top: 10px;
    }

    .three-column-post {
        display: block;
    }
}