/* ===============================================================
    * travels
=============================================================== */
.travels {padding-bottom: 40px;}
.travels .list {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.travels .item {width: calc((100% - 80px) / 5); margin-right: 20px; margin-bottom: 80px;}
.travels .item:nth-of-type(5n) {margin-right: 0;}
.travels .imgbox {width: 100%; height: 400px; overflow: hidden;}
.travels .parallax {width: 100%; height: 100%; transition: .4s;}
.travels .plx-img {width: 100%; height: 450px; object-fit: cover;}
.travels .txtbox {padding-top: 40px;}
.travels .txtbox h2 {font-size: 24px; line-height: 36px;}
.travels .txtbox h3 {font-size: 16px; color: #777; margin: 20px 0 40px;}
.travels .txtbox .btn-more {width: 170px; height: 50px; line-height: 50px;}

.travels .item:hover .parallax {transform: scale(1.1);}
.travels .item:hover .btn-more {box-shadow: inset 0 0 0 56px var(--color-1); color: #fff;}
@media (max-width: 992px){
    .travels {padding-bottom: 30px;}
    .travels .item {width: calc(50% - 5px); margin-right: 10px !important; margin-bottom: 30px;}
    .travels .item:nth-of-type(2n) {margin-right: 0 !important;}
    .travels .imgbox {height: 200px;}
    .travels .plx-img {height: 200px;}
    .travels .txtbox {padding-top: 20px;}
    .travels .txtbox h2 {font-size: 14px; line-height: 16px;}
    .travels .txtbox h3 {font-size: 12px; margin: 10px 0 0;}
    .travels .txtbox .btn-more {display: none;}
}