.padding-30{ padding-left:30px; padding-right:30px; } .directory{ .item-hot{ &:first-child{ .card{ margin-top:0; } } .card{ margin-bottom:2rem; font-size:16px; line-height: 2rem; clear:both; .card-image{ float:left; width:30%; } .card-content{ float:right; width:70%; padding: 15px 30px 10px 30px; i{ font-size:25px; //vertical-align: baseline; color: $link-color; } h3{ i{ color: $price-color; font-size: 16px; } } } .card-action{ padding:10px 0px 0px 0px; margin-top:10px; float:left; clear:both; .sheet-link{ margin-left:15px; a{ text-transform: none; color:$link-color; &:hover{ color:$link-color-hover; } } } .price-col{ text-align: right; .from{ font-size:14px; } p{ margin:5px 0px 10px 0px; } } .dir-col{ padding-right:40px;//15px; } .btn{ margin:0; width: 100%; } } } } } .hotel-cards-vertical{ .price{ top:0; } .card{ margin-bottom:0; } .card .card-content{padding: 20px 20px 5px 20px} .card p{ //font-size:18px; margin-top:5px; i{ vertical-align: baseline; } } .card .card-action { border:none; padding: 10px 20px 20px 20px; .btn{ width: 100%; white-space: normal; margin:0; } } .hightlight{ padding:5px 10px; border:1px solid #fff; font-size: 14px; background-color:#d9e5f6; } } @media only screen and (max-width:768px) { .directory { .item-hot { .card { .card-image, .card-content { width: 100%; } } } } } @media only screen and (max-width:767px) { .directory { .item-hot{ .card { .card-action { .price-col{ text-align: left; } .btn{ margin:20px 0; } } } } } }