/* Responsive Image Optimization for Listen Page */
.listen-page-image-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 15px; /* Add some breathing room */
}

.listen-page-image {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%; /* Ensure it never exceeds container */
}

/* Mobile - Full width */
@media (max-width: 575.98px) {
    .listen-page-image-container {
        max-width: 100%;
        padding: 0;
    }
}

/* Tablet - 70% width */
@media (min-width: 576px) and (max-width: 767.98px) {
    .listen-page-image-container {
        max-width: 70%;
    }
}

/* Desktop small - 60% width */
@media (min-width: 768px) and (max-width: 991.98px) {
    .listen-page-image-container {
        max-width: 60%;
    }
}

/* Desktop medium - 50% width */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .listen-page-image-container {
        max-width: 50%;
    }
}

/* Desktop large - 45% width (more conservative) */
@media (min-width: 1200px) and (max-width: 1599.98px) {
    .listen-page-image-container {
        max-width: 45%;
    }
}

/* Desktop extra large - 40% width */
@media (min-width: 1600px) {
    .listen-page-image-container {
        max-width: 40%;
    }
}