/* ===============================================================
    * rooms
=============================================================== */
.rooms {padding: 70px 0 150px;}
.rooms .width-max {overflow: hidden;}
.rooms-list {display: flex; flex-wrap: wrap; justify-content: flex-start; margin-left: -31px; margin-right: -31px;}
.rooms-item {cursor: pointer; width: calc(100% / 3); text-align: center; padding: 80px 0; border-bottom: 1px solid #ccc;}
.rooms-item.js-last {border-bottom: none; padding-bottom: 0;}
.rooms-item > a {display: block;} 
.rooms-item .border {border-right: 1px solid #ccc; padding: 0 30px;}
.rooms-item__img {position: relative; width: 100%; height: 240px;}
.rooms-item__img:after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: rgba(0,0,0,.5); opacity: 0; transition: .3s;}
.rooms-item__img img {width:100%; height: 100%; object-fit: cover;}
.rooms-item__img:hover:after {opacity: 1;}
.rooms-item__img:hover .overlay-icon {opacity: 1;}
.rooms-item__img .overlay-icon {z-index: 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 24px; color: #fff; opacity: 0; transition: .3s;}
.rooms-item__txt {padding-top: 40px;}
.rooms-item__txt h2 {font-size: 20px; color: #222;}
.rooms-item__txt h3 {font-size: 14px; font-weight: 200; color: #222; margin: 20px 0 30px;}
.rooms-item__txt p {font-size: 14px; font-weight: 200; color: #222;}
.rooms-line {display: inline-block; width: 150px; height: 1px; background: #666; margin: 0 20px;}
.rooms-item__txt .preview-btn {display: block; margin: 40px auto 0; width: 150px; height: 40px; line-height: 38px; font-size: 14px; font-weight: 300; letter-spacing: 0.1em; color: #222; border: 1px solid #444; transition: .3s;}
.rooms-item:hover .preview-btn {background: #e3a259; color: #fff; border-color: #e3a259;}
@media (max-width: 820px){
    .rooms {padding: 60px 0;}
    .rooms-list {margin: 0; width: 100%;}
    .rooms-item {width: 100%; padding: 30px 0;}
    .rooms-item .border {padding: 0; border: none;}
    .rooms-item__img {height: 194px;}
    .rooms-item__txt {padding-top: 30px;}
    .rooms-item__txt h2 {font-size: 18px;}
    .rooms-item__txt h3 {margin: 10px 0 15px;}
    .rooms-line {width: 120px; margin: 0 10px 4px;}
    .rooms-item__txt .preview-btn {width: 100px; height: 25px; line-height: 22px; font-size: 12px; margin: 30px auto 0;}
    .rooms-item.js-last {border-bottom: 1px solid #ccc; padding: 30px 0;}
    .rooms-item:last-child {border-bottom: none;}
    .rooms-item:last-child .preview-btn {margin: 30px auto;}
}