/* Base Styles */
.related-post-wrapper {
    margin: 20px 0;
}

.related-post-cta {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    display: inline-block;
    width: 100%; /* Ensure it takes full width */
    box-sizing: border-box; /* Include padding in width calculation */
    text-align: center; /* Center text by default */
}

.related-post-inline {
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    align-items: center;
    margin-top: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 5px;
}

.related-post-thumbnail img {
    height: auto; /* Height is auto to maintain aspect ratio */
    transition: transform 0.3s ease;
}

.related-post-title {
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease;
}

/* Hover Effects */
.related-post-thumbnail:hover img {
    transform: scale(1.05);
}

.related-post-title:hover {
    text-decoration: none; /* Ensure no underline on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .related-post-cta {
        width: 100%; /* Ensure full width on mobile */
        padding: 10px 0; /* Adjust padding for mobile */
        text-align: center; /* Center text on mobile */
    }

    .related-post-cta {
        font-size: 14px; /* Adjust font size for mobile */
    }

    .related-post-title {
        font-size: 16px; /* Adjust title font size for mobile */
    }

    .related-post-inline {
        flex-direction: column; /* Stack elements vertically on mobile */
        text-align: center; /* Center align content on mobile */
    }

    .related-post-thumbnail {
        margin-right: 0; /* Remove right margin on mobile */
        margin-bottom: 10px; /* Add bottom margin for spacing */
    }

    .related-post-thumbnail img {
        width: 80px; /* Smaller image width for mobile */
    }
}