src/js/poncho-map/demo/css/containers.css

.poncho-map {
    container-type: inline-size;
    container-name: canvasWidthSize;
}
@container canvasWidthSize (min-width: 0px) {
    .pm-slider {
        --pm-slider-width: calc(100% - 20px);
    }
} 
@container canvasWidthSize (min-width: 600px) {
    .pm-slider {
        --pm-slider-width: calc(55% - 20px);
    }
}
@container canvasWidthSize (min-width: 700px) {
    .pm-slider {
        --pm-slider-width: calc(50% - 20px);
    }
} 




/* .poncho-map {
    container-type: inline-size;
    container-name: canvasWidthSize;
}
@container canvasWidthSize (min-width: 0px) {
    .pm-slider {
        --pm-slider-width: calc(100% - 20px);
        border-left: 1px solid blueviolet !important
    }
} 
@container canvasWidthSize (min-width: 600px) {
    .pm-slider {
 --pm-slider-width: calc(100% / 2 - 20px);
 --pm-slider-width: calc(325px - 20px);
        border-left: 1px solid goldenrod !important
    }
}
@container canvasWidthSize (min-width: 700px) {
    .pm-slider {
        --pm-slider-width: calc(100% / 2.7 - 20px);
        border-left: 1px solid salmon !important
    }
} 

@container canvasWidthSize (min-width: 992px) {
    .pm-slider {
        --pm-slider-width: calc(100% / 3 - 20px);
        border-left: 1px solid cyan !important
    }
}  */







/* 

/* Small (sm) */
/* Se aplica a pantallas de 576px y mayores */

/* 
@media (min-width: 576px) {
    .poncho-map[data-scope="poncho-map"]:has(#map) {
        --pm-slider-width: calc(100% - 20px);
        border-top: 6px solid goldenrod
    }

    .poncho-map:has(.slider:is(.slider--in))::before {
        content: "";
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        z-index: 1000;
        background: var(--pm-slider-modal-color);
        opacity: .75;
        transition: .5s
    }
}*/

/* Medium (md) */
/* Se aplica a pantallas de 768px y mayores */

/* 
@media (min-width: 768px) {
    .poncho-map[data-scope="poncho-map"]:has(#map) {
        --pm-slider-width: calc(50% - 20px);
        border-top: 6px solid green
    }

    .poncho-map:has(.slider:is(.slider--in))::before {
        opacity: .0;
        display: none;
    }
}*/

/* Large (lg) */
/* Se aplica a pantallas de 992px y mayores */

/* 
@media (min-width: 992px) {
    .poncho-map[data-scope="poncho-map"]:has(#map) {
        --pm-slider-width: calc(50% - 20px);
        border-top: 6px solid blue
    }
}*/

/* Extra large (xl) */
/* Se aplica a pantallas de 1200px y mayores */

/* 
@media (min-width: 1200px) {
    .poncho-map[data-scope="poncho-map"]:has(#map) {
        --pm-slider-width: calc(50% - 20px);
        border-top: 6px solid orange
    }
}*/

/* Extra extra large (xxl) */
/* Se aplica a pantallas de 1400px y mayores */

/* 
@media (min-width: 1400px) {
    .poncho-map[data-scope="poncho-map"]:has(#map) {
        --pm-slider-width: calc(50% - 20px);
        border-top: 6px solid red
    }
} */