src/js/poncho-map/src/scss/_media.scss
/** 
 * smartphones, iPhone, portrait 480x320 phones
 */
@media (max-width: 575.98px) {
    #{$scope} {
        &:has(.pm-slider:is(.pm-slider--in)) {
            position: relative;
            @include borderRadius(calc(var(--pm-slider-radius) + var(--pm-slider-distance)));
            transition: 0.4s;

            .leaflet-control-attribution {
                opacity: 0.5;
                display: none;
            }

            &::before {
                content: "";
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                position: absolute;
                z-index: 1000;
                background: var(--pm-slider-modal-color);
                opacity: 0.75;
                transition: 0.5s;
            }
        }

        .pm-slider {
            height: calc(var(--pm-slider-media-mobile-height) - var(--pm-slider-distance) * 2);
            top: auto;
            bottom: calc(-1 * var(--pm-slider-media-mobile-height));
            right: var(--pm-slider-distance);
            max-width: 100%;
            width: calc(100% - var(--pm-slider-distance) * 2);

            &.pm-slider--in {
                animation-name: pm-slidein-mobile;
                bottom: var(--pm-slider-distance);
            }
        }

        .poncho-map-filters {
            width: calc(100% - var(--pm-slider-distance) * 2);
        }
    }
}