/* The screen follows the source proportions; shared stages determine device height. */
.marketing-detail .restaurant-solution .restaurant-device-video--tablet {
    aspect-ratio: var(--solution-tablet-aspect, var(--restaurant-device-aspect));
}
.marketing-detail .restaurant-solution .restaurant-device-video--tablet :is(video, .marketing-video-poster) {
    object-fit: contain;
    transform: none;
}

/* Every tab reserves the same preview space, including groups of devices. */
.marketing-detail .restaurant-solution .restaurant-solution__module-panel {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.marketing-detail .restaurant-solution .restaurant-solution__module-copy {
    min-width: 0;
}
.marketing-detail .restaurant-solution .restaurant-solution__module-visual {
    --solution-module-height: min(31rem, 55cqw);
    container-type: inline-size;
    min-width: 0;
}
.marketing-detail .restaurant-solution .restaurant-solution__module-visual :is(.restaurant-device-video, .retail-device-image) {
    flex: none;
    height: var(--solution-module-height);
    max-height: none;
    max-width: none;
    width: auto;
}
.marketing-detail .restaurant-solution .restaurant-solution__module-visual :is(.restaurant-device-video--tablet, .retail-device-image) {
    aspect-ratio: var(--solution-tablet-aspect, var(--restaurant-device-aspect, 1178 / 907));
}
.marketing-detail .restaurant-solution .restaurant-solution__module-visual .restaurant-device-video--phone {
    height: calc(var(--solution-module-height) * var(--solution-module-phone-scale, 1));
}
.marketing-detail .restaurant-solution .table-order-solution__devices {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    padding-top: 0;
}
.marketing-detail .restaurant-solution .table-order-solution__device {
    aspect-ratio: auto;
    height: var(--solution-module-height);
    justify-self: center;
    max-height: none;
    width: auto;
}
.marketing-detail .restaurant-solution .table-order-solution__devices[data-device-count="3"] {
    grid-template-columns: minmax(0, 1fr);
}
.marketing-detail .restaurant-solution .table-order-solution__devices[data-device-count="3"] > .table-order-solution__device {
    grid-area: 1 / 1;
    transform: none;
}
.marketing-detail .restaurant-solution .table-order-solution__devices[data-device-count="3"] > [data-device="phone"] {
    --solution-module-height: min(35rem, 62cqw);
    width: max-content;
}
.marketing-detail .restaurant-solution .table-order-solution__devices > [data-device="tablet"] {
    justify-self: start;
}
.marketing-detail .restaurant-solution .table-order-solution__devices > [data-device="tablet"]:last-child {
    justify-self: end;
}
.marketing-detail .restaurant-solution .table-order-solution__devices[data-device-count="3"] > [data-device="tablet"] {
    clip-path: inset(-5rem 50% -5rem -5rem);
    justify-self: stretch;
    width: 100%;
}
.marketing-detail .restaurant-solution .table-order-solution__devices[data-device-count="3"] > [data-device="tablet"]:last-child {
    clip-path: inset(-5rem -5rem -5rem 50%);
    display: flex;
    justify-content: flex-end;
}

/* Paired employee/customer screens keep equal heights with their individual widths. */
.marketing-detail .restaurant-solution :is(.cafe-solution__customer-display-visual, .retail-solution__display-pair) {
    container-type: inline-size;
}
.marketing-detail .restaurant-solution :is(.cafe-solution__customer-display-visual, .retail-solution__display-pair) .restaurant-device-video {
    height: min(26rem, 31cqw);
    margin-inline: auto;
    max-height: none;
    width: auto;
}

/* Story tablets share a height; each frame width follows its media. */
.marketing-detail .restaurant-solution .restaurant-solution__flow-stage {
    --solution-story-tablet-height: min(27rem, calc((100cqw - 1.5rem) / 1.6), calc(100cqh - 1.5rem));
    --solution-story-phone-height: min(36rem, calc(100cqh - 2rem), calc((100cqw - 1.5rem) * 1174 / 575));
    container-type: size;
}
.marketing-detail .restaurant-solution .restaurant-solution__flow-stage :is(.restaurant-device-video--tablet, .retail-device-image) {
    flex: none;
    height: var(--solution-story-tablet-height);
    max-height: none;
    max-width: none;
    width: auto;
}
.marketing-detail .restaurant-solution .delivery-solution__story-media--tablet {
    max-width: none;
}
.marketing-detail .cafe-solution .restaurant-solution__flow-stage {
    --solution-story-tablet-height: min(28rem, calc((100cqw - 1.5rem) * .78 / 1.44), calc(100cqh - 4rem));
}
.marketing-detail .cafe-solution .cafe-solution__channel-visual {
    display: block;
}
.marketing-detail .cafe-solution .cafe-solution__channel-device--tablet {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
}
.marketing-detail .cafe-solution .cafe-solution__channel-device--tablet > span {
    bottom: 100%;
    position: absolute;
}
.marketing-detail .cafe-solution .cafe-solution__channel-device--phone {
    bottom: 10%;
    position: absolute;
    right: 0;
    width: min(23cqw, 11rem);
}
.marketing-detail .table-order-solution .restaurant-solution__flow-stage :is(.table-order-solution__scan-phone, .restaurant-device-video--phone) {
    height: var(--solution-story-phone-height);
    max-height: none;
    width: auto;
}
.marketing-detail .table-order-solution .restaurant-solution__flow-device-pair {
    --solution-story-tablet-height: min(22rem, calc((100cqw - 1.5rem) * .68 / 1.6), calc((100cqh - 1.5rem) * .7));
}
.marketing-detail .table-order-solution .restaurant-solution__flow-device-pair .restaurant-solution__flow-device {
    width: max-content;
}

@media (min-width: 48.001rem) {
    .marketing-detail .cafe-solution .cafe-solution__customer-display-visual .restaurant-device-video {
        height: min(26rem, 33cqw);
        max-width: none;
    }
}

@media (max-width: 48rem) {
    .marketing-detail .restaurant-solution .restaurant-solution__module-panel {
        grid-template-columns: minmax(0, 1fr);
    }
    .marketing-detail .restaurant-solution :is(.cafe-solution__customer-display-visual, .retail-solution__display-pair) .restaurant-device-video {
        height: min(26rem, 62cqw);
    }
    .marketing-detail .food-court-solution .restaurant-solution__flow-stage:has(.food-court-solution__flow-screen--channels[aria-hidden="false"]) {
        container-type: inline-size;
    }
}

/* Channel overview cards use a bounded local canvas for their smaller previews. */
.marketing-detail .food-court-solution .food-court-solution__channel-device {
    container-type: size;
}
.marketing-detail .food-court-solution .food-court-solution__channel-device .restaurant-device-video {
    align-self: center;
    height: min(100cqh, calc(100cqw / 1.6));
    max-height: none;
    max-width: none;
    width: auto;
}