/* Smartphones and smaller devices */
@media only screen and (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack elements vertically on small screens */
    }

    .background-image {
        width: 100%; /* Full width */
        height: 300px; /* Reduce height to accommodate smaller screens */
        order: 2; /* Move the image below the text content */
    }

    .content {
        width: 100%; /* Full width */
        padding: 10px;
        order: 1; /* Ensure content is above the image */
    }

    .speech-bubble {
        margin-bottom: 20px; /* Space between text and image */
    }
}

/* Medium devices (tablets in portrait and landscape) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .container {
        flex-direction: column;
    }

    .background-image {
        width: 100%;
        height: 400px;
        order: 2;
    }

    .content {
        width: 100%;
        padding: 15px;
        order: 1;
    }
}