/* 
RESTAURANT
*/
.r-restaurant-bg {
    position: relative;
    width: 100%;
    height: 60vh;
}
@media only screen and (min-width: 1024px) {
    .r-restaurant-bg {
        height: 40vw;
    }
}

#r_restaurant-pic {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.r_restaurant-title {
    position: absolute;
    top: .2rem;
    left: .2rem;
    width: calc(100vw - .4rem);
    z-index: 2;
}

#r_restaurant-peppers {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 5;
}

#r_restaurant-peppers img {
    position: absolute;
    height: 32vw;
    width: auto;
    rotate: -5deg;
    opacity: 0;
    animation: fall-small 4s linear 0s forwards infinite;
}
@media only screen and (min-width: 1024px) {
    #r_restaurant-peppers img {
        height: 16vw;
    }
}

.r_restaurant-peppers_pic:nth-of-type(1) {
    top: 0;
    left: 2rem;
    animation-delay: 200ms !important;
}

.r_restaurant-peppers_pic:nth-of-type(2) {
    top: 0;
    right: 25vw;
    animation-delay: 1s !important;
}

.r_restaurant-peppers_pic:nth-of-type(3) {
    top: 0;
    left: 0;
    animation-delay: 2s !important;
}

.r_restaurant-peppers_pic:nth-of-type(4) {
    top: 0;
    right: -1rem;
    animation-delay: 500ms !important;
}

.r_restaurant-peppers_pic:nth-of-type(5) {
    top: 0;
    left: 43vw;
    animation-delay: 3s !important;
}

.r_restaurant-peppers_pic:nth-of-type(6) {
    top: 0;
    right: 1rem;
    animation-delay: 2500ms !important;
}

.r-restaurant-text {
    padding: .3rem;
}



/* 
ROOMS
*/
.r-rooms_half > * {grid-column: 1/-1;}
@media only screen and (min-width: 1024px) {
    .r-rooms_half > * {
        grid-column: span 3;
        min-height: 42vw;
        max-height: 42vw;
    }
}

.r-rooms_half-bg,
.r-rooms_full-bg {
    width: 100%;
    height: 60vh;
    position: relative;
}

.r-rooms_half-pic,
.r-rooms_full-pic,
.r-rooms_half-elements {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.r-rooms_half-elements img {
    position: absolute;
    height: 50vw;
    width: auto;
    rotate: -8deg;
}
@media only screen and (min-width: 1024px) {
    .r-rooms_half-elements img {
        height: 18vw;
    }
}

.r-rooms_title {
    position: absolute;
    top: 1rem;
    display: flex;
    align-items: center;
}
@media only screen and (min-width: 1024px) {
    .r-rooms_title {
        top: 2rem;
        display: block;
    }
}

.r-rooms_half.--left .r-rooms_title {rotate: -8deg;}
.r-rooms_half.--right .r-rooms_title {
    top: 1.25rem;
    right: .3rem;
    rotate: 10deg;
}

@media only screen and (min-width: 1024px) {
    .r-rooms_half.--right .r-rooms_half-bg {order: 2;}
    .r-rooms_half.--right .r-room-text {order: 1;}

    .r-rooms_half.--right .r-rooms_title {
        top: unset;
        bottom: 8rem;
    }
}

#restaurant_terrace .r-rooms_title {
    rotate: 2deg;
}

.r-rooms_label {
    position: absolute;
    top: 14%;
    left: 26%;
    width: 37vw;
    z-index: 10;
}
.r-rooms_half.--right .r-rooms_label {
    top: 21%;
    right: 2%;
    left: unset;
}
#restaurant_terrace .r-rooms_label {
    top: 18%;
    left: 26%;
}
@media only screen and (min-width: 1024px) {
    .r-rooms_label {
        top: 21%;
        left: 30%;
        width: 12vw;
    }

    .r-rooms_half.--right .r-rooms_label {
        top: 34%;
        right: 51%;
    }
    #restaurant_terrace .r-rooms_label {
        top: 28%;
        left: 17%;
    }
}


.r-room-text {padding: .3rem;}
@media only screen and (min-width: 1024px) {
    .r-room-text {padding: .5rem;}
}


/* 
BOOKING
*/
.r-booking {position: relative;}
.r-booking-header {
    padding-bottom: .3rem;
}
@media only screen and (min-width: 1024px) {
    .r-booking-header {
        display: flex;
        padding: .3rem;
    }
}

.r_booking-title {
    padding: .35rem .3rem;
}
@media only screen and (min-width: 1024px) {
    .r_booking-title {
        min-width: max-content;
        padding: 0;
    }
}

.r_booking-description {
    padding: 0 .3rem;
}
@media only screen and (min-width: 1024px) {
    .r_booking-description {
        padding-left: 1rem;
    }
}

.r_booking-rooms > * {
    grid-column: 1/-1;
}

.r_booking-room {
    position: relative;
    width: 100%;
    max-height: 83vw;
    min-height: 83vw;
}
@media only screen and (min-width: 1024px) {
    .r_booking-rooms > * {
        grid-column: span 3;
    }

    .r_booking-room-solo {
        grid-column: 1/-1;
    }

    .r_booking-room {
        min-height: 42.5vw;
        max-height: 42.5vw;
    }
}

.r_booking-room-pic {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.r_booking-room .r_booking-room-pic_hover {display: none;}
.r_booking-room .r_booking-room-title_hover {display: none;}

.r_booking-room-title {
    position: absolute;
    top: 0;
    right: .5rem;
    left: .5rem;
    bottom: 0;
    height: 83vw;
    width: auto;
    margin: 0 auto;
    z-index: 5;
}

@media only screen and (min-width: 1024px) {
    .r_booking-room-title {
        height: 42.5vw;
    }
}

.r_booking-room.hoverOn .r_booking-room-pic {display: none;}
.r_booking-room.hoverOn .r_booking-room-pic_hover {display: block;}
.r_booking-room.hoverOn .r_booking-room-title {display: none;}
.r_booking-room.hoverOn .r_booking-room-title_hover {display: block;}

@media (hover: hover) {
    .r_booking-room:hover .r_booking-room-pic {display: none;}
    .r_booking-room:hover .r_booking-room-pic_hover {display: block;}

    .r_booking-room:hover .r_booking-room-title {display: none;}
    .r_booking-room:hover .r_booking-room-title_hover {display: block;}
}