.hotel-container {
    .hotel-content {
        .hotel-courtyard {
            width: 100%;
            min-height: calc(100vh - 40px);
            height: 100%;

            .courtyard-content {
                height: max(calc(100vh - 40px), 450px);
                background-image: url('../../../images/hotel/floor1/courtyard/courtyardbg2.jpg');
                background-repeat: no-repeat;
                background-size: cover;
                background-position: bottom center;
                position: relative;

                .bubble {
                    position: absolute;
                    top: 350px;
                    left: 50%;
                    transform: translateX(-50%);
                    z-index: 9999;
                    width: 180px;
                    height: 180px;
                    cursor: pointer;
                }
                .bubble-pop {
                    position: absolute;
                    top: 350px;
                    left: 50%;
                    transform: translateX(-50%);
                    z-index: 9999;
                    width: 180px;
                    height: 180px;
                    cursor: pointer;
                }

                .floor{
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    z-index: 9;

                    img {
                        width: 100%;
                    }
                }

                .sky-door {
                    text-align: center;
                    z-index: 9;

                    img {
                        width: 320px;
                    }
                }

                .journal-block {
                    position: absolute;
                    max-width: 80px;
                    cursor: pointer;
                    top: 350px;
                    left: 50%;
                    transform: translateX(-50%);
                    z-index: 9995;

                    img{
                        width: 100%;
                    }
                }
            }
        }
    }
}

@media (min-width: 1024px) {
    .hotel-container {
        .hotel-content {
            .hotel-courtyard {
                .floor-room-grid {
                    .room-content {
                        min-height: calc(100vh - 40px - 150px);
                    }
                }
            }
        }
    }
}