@media (max-width: 650px) {
    .extra_content {
        display: none;
    }

    #read_more {
        display: block;
    }

    .extra_content {
        max-height: 0; /* Hides the content */
        opacity: 0; /* Makes the content invisible */
        overflow: hidden; /* Prevents overflow when collapsed */
        transition: max-height 0.5s ease-out, opacity 0.5s ease-out; /* Smooth transition */
    }

    /* When .extra_content is shown */
    .extra_content.d-block {
        max-height: 500px; /* Adjust based on your content's height */
        opacity: 1; /* Makes the content visible */
    }
}