.guest-house{
    .single-location{
         img{
            width: 100%;
            height: 517px;
            @media #{$lg}{
                height: 350px;
            }
            @media #{$md}{
                height: 300px;
            }
            @media #{$sm}{
                height: 300px;
            }
            @media #{$xs}{
                height: 300px;
            }
         }
         position: relative;
         &::before{
             position: absolute;
             content: "";
             left: 0;
             bottom: 0;
             right: 0;
             width: 100%;
             height: 100%;
             background: rgba(0, 0, 0,.3);
             z-index: 0;
             @include transition(.4s);
             opacity: 0;
             visibility: hidden;
         }
         .guest-contents{
            @include transition(.4s);
            background: $theme-color;
            position: absolute;
            left: 60px;
            padding: 22px 42px;
            bottom: 25px;
            z-index: 1;
            opacity: 0;
            visibility: hidden;
            @media #{$sm}{
                left: 20px;
            }
            @media #{$xs}{
                left: 20px;
            }
             
            h3{
                a{
                    @include transition(.4s);
                    color: #fff;
                    display: inline-block;
                    font-size: 28px;
                    font-weight: 500;
                    text-align: center;
                    @media #{$lg}{
                        font-size: 18px;
                    }
                    @media #{$md}{
                        font-size: 18px;
                    }
                    @media #{$sm}{
                        font-size: 18px;
                    }
                    @media #{$xs}{
                        font-size: 22px;
                    }
                    &:hover{
                    color: #fff;
                    }
                }
            }
            p{
                margin-bottom: 10px;
                color: rgba(255, 255, 255,.8);
                font-weight: 300;
                font-size: 16px;
                text-transform: uppercase;
                margin-bottom: 0;
                @media #{$sm}{
                    font-size: 14px;
                }
                br{
                    @media #{$laptop}{
                        display: none;
                    }
                    @media #{$lg}{
                        display: none;
                    }
                    @media #{$md}{
                        display: none;
                    }
                    @media #{$sm}{
                        display: none;
                    }
                    @media #{$xs}{
                        display: none;
                    }
                }
            }
         }
         &:hover{
            &::before{
                opacity: 1;
                visibility: visible;
            }
            .guest-contents{
                left: 70px;
                opacity: 1;
                visibility: visible;
                @media #{$sm}{
                    left: 25px;
                }
                @media #{$xs}{
                    left: 25px;
                }
            }
         }
     }
 }