:root {
    --mbanji-market-container: 1320px;
    --mbanji-market-card-gap: 20px;
    --mbanji-market-card-radius: 18px;
    --mbanji-market-card-ratio: 4 / 3;
    --mbanji-market-card-width: 315px;
}

/* Events and generic marketplace service pages */
.mbanji-events-container,
.mbanji-service-results {
    width: min(var(--mbanji-market-container), calc(100% - 48px)) !important;
}

.mbanji-service-results {
    margin-left: auto !important;
    margin-right: auto !important;
}

.mbanji-events-grid,
.mbanji-service-grid {
    display: grid !important;
    gap: var(--mbanji-market-card-gap) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.mbanji-service-grid__column {
    display: flex !important;
    flex: none !important;
    max-width: none !important;
    padding: 0 !important;
    width: auto !important;
}

.mbanji-event-home-card.card,
.mbanji-service-card {
    min-width: 0;
    width: 100%;
}

.mbanji-event-home-card__visual,
.mbanji-event-home-card .room-image-container200,
.mbanji-event-home-card__placeholder,
.mbanji-service-card__visual {
    aspect-ratio: var(--mbanji-market-card-ratio) !important;
    border-radius: var(--mbanji-market-card-radius) !important;
    height: auto !important;
    width: 100% !important;
}

.mbanji-service-card__visual--photo img {
    height: 100% !important;
    object-fit: cover;
    width: 100% !important;
}

/* Restaurant cards retain the map but use the homepage card width. */
.mbanji-restaurant-grid {
    gap: var(--mbanji-market-card-gap) !important;
    grid-template-columns: repeat(2, minmax(0, var(--mbanji-market-card-width))) !important;
}

.mbanji-restaurant-card__visual {
    aspect-ratio: var(--mbanji-market-card-ratio) !important;
    border-radius: var(--mbanji-market-card-radius) !important;
    height: auto !important;
    width: 100% !important;
}

/* Legacy accommodation/experience result cards beside a map. */
#properties_show,
#recommended_properties_show {
    display: grid !important;
    gap: var(--mbanji-market-card-gap) !important;
    grid-template-columns: repeat(2, minmax(0, var(--mbanji-market-card-width))) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#properties_show > [class*="col-"],
#recommended_properties_show > [class*="col-"] {
    flex: none !important;
    max-width: none !important;
    padding: 0 !important;
    width: auto !important;
}

#properties_show .room-image-container200,
#recommended_properties_show .room-image-container200 {
    aspect-ratio: var(--mbanji-market-card-ratio) !important;
    border-radius: var(--mbanji-market-card-radius) !important;
    height: auto !important;
    object-fit: cover;
    width: 100% !important;
}

/* Accommodation search uses three results per row beside the map on desktop. */
@media (min-width: 1101px) {
    .sv_search_page.search #properties_show,
    .sv_search_page.search #recommended_properties_show {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1100px) {
    .mbanji-events-grid,
    .mbanji-service-grid,
    .mbanji-restaurant-grid,
    #properties_show,
    #recommended_properties_show {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    .mbanji-events-container,
    .mbanji-service-results {
        width: calc(100% - 24px) !important;
    }

    .mbanji-events-grid,
    .mbanji-service-grid,
    .mbanji-restaurant-grid,
    #properties_show,
    #recommended_properties_show {
        gap: 20px 12px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .mbanji-event-home-card__visual,
    .mbanji-event-home-card .room-image-container200,
    .mbanji-event-home-card__placeholder,
    .mbanji-service-card__visual,
    .mbanji-restaurant-card__visual,
    #properties_show .room-image-container200,
    #recommended_properties_show .room-image-container200 {
        border-radius: 16px !important;
    }
}