/* PRAESIVUM — poprawka responsywnego bannera
   Banner źródłowy: 4200 × 700 px (proporcja 6:1)
   Załaduj ten plik PO głównym styles.css.
*/

img[src*="praesivum-banner"] {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Jeżeli banner jest umieszczony w kontenerze o stałej wysokości,
   kontener również musi zachować proporcje grafiki. */
div:has(> img[src*="praesivum-banner"]),
figure:has(> img[src*="praesivum-banner"]),
picture:has(> img[src*="praesivum-banner"]) {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 6 / 1;
    overflow: hidden;
}

/* Telefony i mniejsze tablety */
@media (max-width: 768px) {
    img[src*="praesivum-banner"] {
        width: 100%;
        max-width: 100%;
        height: auto !important;
        aspect-ratio: 6 / 1;
        object-fit: contain !important;
        object-position: center center !important;
    }

    div:has(> img[src*="praesivum-banner"]),
    figure:has(> img[src*="praesivum-banner"]),
    picture:has(> img[src*="praesivum-banner"]) {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 6 / 1 !important;
        overflow: hidden;
    }
}

/* Bardzo wąskie ekrany */
@media (max-width: 480px) {
    img[src*="praesivum-banner"] {
        width: 100%;
        height: auto !important;
        object-fit: contain !important;
    }
}