/* 4.7.2 visual consistency: all service surfaces use one complete-image frame.
 *
 * 4.7.2: the step 2 hero left this group. It is not a card thumbnail -- it runs
 * the full width of the detail panel. The same 3:2 frame is used everywhere so
 * portrait and landscape uploads remain complete instead of being cropped.
 * On a portrait upload the old clamp fought
 * `body.sbs-booking-immersive .sbs-service-detail-image{aspect-ratio:auto}`
 * (higher specificity) and lost, so the raw upload set the height instead. It
 * gets its own ratio below so all service surfaces remain consistent. */
.sbs-booking-container .sbs-service-img-wrap,
.sbs-booking-container .sbs-service-thumb,
.sbs-booking-container .ybs-svc-hero,
.yatoon-catalog .ycat-img-wrap {
    aspect-ratio: 3 / 2 !important;
    overflow: hidden !important;
}

.sbs-booking-container .sbs-service-detail-image {
    overflow: hidden !important;
}

@media (min-width: 641px) {
    .sbs-booking-container .sbs-service-detail-image {
        aspect-ratio: 3 / 2 !important;
    }
}

@media (max-width: 640px) {
    .sbs-booking-container .sbs-service-detail-image {
        aspect-ratio: 3 / 2 !important;
    }
}

.sbs-booking-container .sbs-service-img-wrap img,
.sbs-booking-container .sbs-service-thumb img,
.sbs-booking-container .ybs-svc-hero img,
.sbs-booking-container .sbs-service-detail-image img,
.yatoon-catalog .ycat-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    background: #f8f1f5 !important;
}

@media (min-width: 641px) {
    .sbs-booking-container .sbs-service-item.ybs-svc-card .ybs-svc-hero {
        width: 100% !important;
        height: 196px !important;
        min-height: 196px !important;
        align-self: center;
    }

    .sbs-booking-container .sbs-service-item:not(.ybs-svc-card) .sbs-service-img-wrap {
        width: 132px !important;
        height: 88px !important;
    }
}

@media (max-width: 640px) {
    .sbs-booking-container .sbs-service-item.ybs-svc-card .ybs-svc-hero {
        min-height: 148px !important;
    }

    .sbs-booking-container .sbs-service-item:not(.ybs-svc-card) .sbs-service-img-wrap {
        width: 104px !important;
        height: 69px !important;
    }
}