:root {
    --menu-dish-image-size: 380px;
    --menu-dish-gap: 32px;
    --menu-page-gutter: 16px;
}

.present,
.presentwp {
    max-width: 100%;
    box-sizing: border-box;
}

.present {
    width: var(--menu-dish-image-size);
}

.centered:has(> .present),
.namecom:has(> .present) {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    column-gap: var(--menu-dish-gap);
}

.centered:has(> .present:nth-child(2)) > .present,
.namecom:has(> .present:nth-child(2)) > .present {
    width: min(var(--menu-dish-image-size), calc((100% - var(--menu-dish-gap)) / 2));
}

.present > img,
.menu-card-image,
#menu-grid.is-classic .present > img {
    display: block;
    width: 100%;
    max-width: var(--menu-dish-image-size);
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}

.menu-card-image {
    width: var(--menu-dish-image-size);
    height: var(--menu-dish-image-size);
    max-width: 100%;
}

.menu-card .menu-image-link {
    display: inline-block;
    width: min(100%, var(--menu-dish-image-size));
}

#menu-grid.is-classic .present > img {
    border-radius: 10%;
}

@media (max-width: 767.98px) {
    :root {
        --menu-dish-image-size: min(
            380px,
            calc(100vw - (var(--menu-page-gutter) * 2))
        );
        --menu-dish-gap: 16px;
    }
}