.popular-location{
    .single-location{
        position: relative;
        .location-img{
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            z-index: 0;
            &::before{
              position: absolute;
              width: 100%;
              height: 50%;
              bottom: 0;
              content: "";
              @extend %gallery;
              z-index: 1;
            }
            img{
                width: 100%;
                transform: scale(1);
                transition: all .5s ease-out 0s;
            }
        }
        .location-details{
            position: absolute;
            left: 45px;
            bottom: 33px;
            @media #{$xs}{
                left: 19px;
                bottom: 3px;
            }
            @include transition (.4s);
            p{
                color: #fff;
                font-size: 24px;
                font-weight: 300;
                display: inline-block;
                padding-right: 17px;
                padding-top: 19px;
                @media #{$xs}{
                    font-size: 18px;
                     line-height: 1.1;
                } 
            }
            .location-btn{
                padding: 4px 15px;
                background: $theme-color;
                color: #fff;
                border-radius: 30px;
                display: inline-block;
                &:hover{
                    background: #fff;
                    color: $theme-color;
                } 
                i{
                    font-size: 10px;
                    padding: 0;
                    margin: 0;
                    position: relative;
                    left: -3px;
                }
            }
            ul{
                display: inline-block;
                padding-left: 10px;
                li{
                    display: inline-block;
                    color: #fff;
                    font-size: 19px;
                }
            }
        }
    }
}
// Hover
.single-location:hover{
    .location-img{
        img{
            transform: scale(1.1);
        }
    }
}