/* ========================================
   Destination Page Styles 
   ======================================== */

/* Category Show */
.cate-show {
    display: block
}

.cate-show img {
    width: 100%
}

/* Block Title */
.block-title {
    font-size: 1.5rem
}

/* Destinations Grid */
.dests .item {
    width: 33.33333333%
}

.dests .item .item-link {
    width: 27.0833rem;
    height: 20.3112rem;
    position: relative;
    overflow: hidden
}

.dests .item .item-link .item-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}

.dests .item .item-link img {
    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: all .3s ease-in-out
}

.dests .item .item-link .item-title {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    font-weight: 400
}

.dests .item .item-link:hover img {
    transform: scale(1.1);
    transition: all .3s ease-in-out
}

/* Tours Section */
.tours.tours-white {
    background-color: #ffffff
}

.tours.tours-gray {
    background-color: #f2f2f2
}

/* Products Grid */
.prods {
    width: 82.5rem;
    margin: 0 auto
}

.block-header .block-title2 {
    padding: 2rem 0rem
}

.block-header .block-intro {
    padding: 0rem 1rem;
    margin-bottom: 1rem
}

.prods:after {
    display: block;
    content: "";
    clear: both;
    height: 0px;
    visibility: hidden
}

.prods > .prod {
    float: left;
    width: 33.33333333%
}

/* Product Card */
.prod-inner {
    margin: 1rem;
    padding: 1rem;
    border-radius: .25rem;
    background-color: #f9f9f9
}

.prods > .prod:hover .prod-inner {
    background-color: rgba(254, 248, 236, .3);
    box-shadow: 0 0 .25rem .005rem #c60
}

/* Product Image */
.prod-img {
    display: inline-block;
    width: 23.5rem;
    height: 17.625rem;
    overflow: hidden
}

.prod-img img {
    width: 100%;
    height: 100%;
    transform: scale(1);
    transition: all .6s
}

.prods > .prod:hover .prod-img img {
    transform: scale(1.125);
    transition: all .6s
}

/* Product Name */
.prod-name {
    display: -webkit-box;
    font-size: 1.125rem;
    line-height: 1.6rem;
    height: 3.2rem;
    margin: 1rem 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

/* Product Cities */
.prod-cities {
    display: -webkit-box;
    color: #686868;
    font-size: .85rem;
    line-height: 1.4rem;
    height: 2.8rem;
    margin: 1rem 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

/* Product Bottom */
.prod-bottom {
    display: block;
    margin: 1.5rem 0
}

.prod-bottom .prod-price {
    font-size: 1.25rem;
    color: #c00
}

.prod-bottom .prod-view {
    display: block;
    padding: .25rem 2rem;
    border: 1px solid #d8d8d8;
    border-radius: 2rem;
    background: none
}

.prod-bottom .prod-view:hover {
    color: #fff;
    background-color: #f90;
    border: 1px solid #ff9900
}

/* View Box */
.prods .viewbox:before {
    display: block;
    content: "";
    clear: both;
    height: 0rem;
    visibility: hidden
}

.viewbox {
    padding-top: 1.8rem;
    padding-bottom: 3rem
}

/* View All Button */
.view-all-btn {
    display: inline-block;
    padding: .5rem 3rem;
    border-radius: 6rem;
    border: 1px solid #d8d8d8
}

.view-all-btn:hover {
    color: #fff;
    background-color: #f90;
    border: 1px solid #ff9900
}

/* Things to Do */
.things{
    display: flex;
    flex-wrap: wrap;
}
.things .item {
    width: 33.33333333%
}

.things .item .item-link {
    width: 27.0833rem;
    height: 20.3112rem;
    position: relative;
    overflow: hidden
}

.things .item .item-link .item-img {
    width: 100%;
    height: 100%
}

.things .item .item-link img {
    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: all .3s ease-in-out
}

.things .item .item-link .item-title {
    position: absolute;
    bottom: .75rem;
    left: 0;
    z-index: 1;
    width: 100%;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    font-weight: 400
}

.things .item .item-link:hover img {
    transform: scale(1.1);
    transition: all .3s ease-in-out
}

/* ========================================
   Responsive Styles 
   ======================================== */

/* Max Width 1200px */
@media (max-width: 1200px) {
    .dests .item {
        width: 50% !important
    }
    
    .dests .item .item-link {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3
    }
    
    .things .item {
        width: 50% !important
    }
    
    .things .item .item-link {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3
    }
    
    .prods {
        width: 100% !important
    }
}

/* Max Width 768px */
@media (max-width: 768px) {
    .dests .item {
        width: 100% !important;
        float: none;
        margin-bottom: 1rem
    }
    
    .dests .item .item-link {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9
    }
    
    .things .item {
        width: 100% !important;
        float: none;
        margin-bottom: 1rem
    }
    
    .things .item .item-link {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9
    }
    
    .prods {
        width: 100% !important
    }
    
    .prods > .prod {
        width: 100% !important;
        float: none
    }
    
    .prods > .prod .prod-inner {
        margin: .5rem;
        padding: .75rem
    }
    
    .prods > .prod .prod-img {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3
    }
    
    .prods > .prod .prod-name {
        font-size: 1rem;
        height: auto;
        -webkit-line-clamp: 2
    }
    
    .prods > .prod .prod-cities {
        font-size: .8rem;
        height: auto;
        -webkit-line-clamp: 1
    }
    
    .prods .block-header .block-title2 {
        font-size: 1.25rem;
        padding: 1rem 0
    }
    
    .prods .block-header .block-intro {
        font-size: .875rem;
        line-height: 1.4
    }
    
    .viewbox {
        padding-top: 1rem;
        padding-bottom: 2rem
    }
    
    .view-all-btn {
        padding: .4rem 2rem;
        font-size: .875rem
    }
}