.location-cntr{ display: inline-block; width: 100%; text-align: center;}
.location-cntr h2{ margin-bottom: 20px;}
.location-cntr ul{ padding: 0;}
.location-cntr ul li{ list-style: none; display: inline-block; width:calc(33.33% - 15px); margin:0 6px 15px 6px; padding: 0;}
.location-cntr ul li a{ position: relative; display: block;}
.location-cntr ul li a img{ width:100%; height: 100%; object-fit: cover;}
.location-details{ position: absolute; left:0; right:0; bottom: 0; height:65px; padding: 10px; transition:all 0.5s ease-in-out; overflow: hidden;}
.location-details .location-name { font-size: 1.2em; display: grid; align-items: center; height: 45px; overflow: hidden; transition:all 0.5s ease-in-out;}
.location-details .location-name .location-title{ width: 100%; font-weight: 400;}
.location-details .location-dscrp{ padding-top:15px;}
.location-cntr ul li a:hover .location-details{ height: 100%; padding: 15px; }
.location-cntr ul li a:hover .location-details .location-name { height: 0;}
.location-cntr ul li a:hover .location-details .location-dscrp{ padding-top:0;}

.location-cntr.one-column ul li{ width:calc(100% - 0px); margin:0 0px 15px 0px;}
.location-cntr.two-column ul li{ width:calc(50% - 15px);}
.location-cntr.four-column ul li{ width:calc(25% - 15px);}
.location-cntr.five-column ul li{ width:calc(20% - 15px);}

.location-cntr.location-style-2 ul li { perspective: 1000px;}
.location-cntr.location-style-2 ul li a{ position: relative; width: 100%; transition: transform 0.6s; transform-style: preserve-3d;}
.location-cntr.location-style-2 ul li:hover a{ transform: rotateY(180deg);}
.location-flip-front, .location-flip-back { position: absolute; top:0; width: 100%; height: 100%; backface-visibility: hidden;}
.location-flip-front{ z-index: 2;}
.location-flip-back { transform: rotateY(180deg); z-index: 1; overflow: auto; padding:15px;}
.location-cntr.location-style-2 ul li:hover a .location-flip-back{ z-index: 3;}
.location-cntr.location-style-2 .location-details{ top:0; height: auto;}
.location-cntr.location-style-2 .location-details .location-name { position: absolute; left: 15px; right:15px; top: 50%; transform: translateY(-50%); text-shadow: 1px 1px 3px #000;}
.location-cntr.location-style-2 .location-details .location-name,
.location-cntr.location-style-2 ul li a:hover .location-details .location-name { height: auto;}

.location-cntr.location-style-3 .location-details{ position: inherit; padding: 7px; height: auto;}
.location-cntr.location-style-3 .location-details .location-name { height: 47px; overflow: hidden; display: grid; align-items: center;}
.location-cntr.location-style-3 ul li a{ overflow: hidden;}
.location-cntr.location-style-3 ul li a img{ transition: 0.3s linear;}
.location-cntr.location-style-3 ul li a:hover img{ transform: scale(1.3) rotate(10deg);}

.location-cntr.location-style-3 ul li a:hover .location-details{ padding:7px;}
.location-cntr.location-style-3 ul li a:hover .location-details .location-name{ height: 47px;}

@media (max-width: 768px){
    .location-cntr ul li, .location-cntr.one-column ul li , .location-cntr.two-column ul li,
    .location-cntr.four-column ul li, .location-cntr.five-column ul li { 
       width:calc(100% - 0px); margin: 0 0 15px 0;
    }
}
@media print {
    .location-flip-back{ display: none;}
}