@media (max-width: 680px) {
    .view-switch {
        top: 14px;
    }

    .view-switch button {
        min-width: 100px;
        padding: 9px 12px;
    }

    .exterior-stage {
        padding: 70px 8px;
    }

    .exterior-media {
        width: min(100%, calc((100dvh - 140px) * 16 / 9));
    }

    .exterior-hotspot {
        width: 14px;
        height: 14px;
    }

    .exterior-hotspot::after {
        display: none;
    }

    .exterior-arrow {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .exterior-arrow.previous {
        left: 10px;
    }

    .exterior-arrow.next {
        right: 10px;
    }

    .info-panel {
        top: auto;
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        max-height: 72vh;
        padding: 22px;
        transform: translateY(calc(100% + 30px));
    }

    .info-backdrop.is-open .info-panel {
        transform: translateY(0);
    }

    .info-title {
        font-size: 24px;
    }

    .info-panel-header {
        top: -22px;
        margin: -22px -22px 24px;
        padding: 22px;
    }

    .interior-help {
        right: 12px;
        bottom: 12px;
    }
}