/* ==========================================================================
   Menu Dropdown Image — Front-end
   Obrazek pojawia się wewnątrz sub-menu, zaraz za otwarciem listy.
   Dostosuj zmienne CSS do swojego motywu.
   ========================================================================== */

:root {
    --mdi-image-width:  100%;
    --mdi-image-max-h:  200px;
    --mdi-image-radius: 0px;
    --mdi-image-mb:     12px;
}

/* Ukrywamy span z danymi — JS przeniesie obrazek do właściwego miejsca */
.mdi-image-data {
    display: none !important;
}

/* Kontener obrazka wewnątrz dropdowna */
.mdi-dropdown-wrapper {
    display: block;
    padding: 0px 10px 10px;
    line-height: 0;
}

.mdi-dropdown-wrapper img.mdi-dropdown-image {
    display: block;
    width: var(--mdi-image-width);
    max-height: var(--mdi-image-max-h);
    height: auto;
    object-fit: cover;
    border-radius: var(--mdi-image-radius);
    margin-bottom: var(--mdi-image-mb);
	aspect-ratio: 2 / 1;
}