.popover {
    max-width: 400px; /* Default maximum width */
}

@media (min-width: 576px) {
    /* Small devices (576px and up) */
    .popover {
        max-width: 80%; /* Set the maximum width to 80% of the screen width */
    }
}

@media (min-width: 768px) {
    /* Medium devices (768px and up) */
    .popover {
        max-width: 400px; /* Reset maximum width to 400px */
    }
}

@media (min-width: 992px) {
    /* Large devices (992px and up) */
    .popover {
        max-width: 400px; /* Reset maximum width to 400px */
    }
}

@media (min-width: 1200px) {
    /* Extra large devices (1200px and up) */
    .popover {
        max-width: 400px; /* Reset maximum width to 400px */
    }
}