/* ### Main View ### */

.r-listview .k-listview-item {
   width: 380px !important;
   height: 240px;
   left: -10px;
   margin: 0 10px 20px 10px !important;
   box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 10px, rgba(0, 0, 0, 0.22) 0px 4px 3px;
}



/* ### Tile Card ### */

.h-card-body {
   width: 170px;
   height: 100%;
   float: left;
   margin-left: 20px;
}

.h-card-title {
   display: block;
   font-size: 14px;
   letter-spacing: .5px;
   margin-top: 20px;
   text-transform: uppercase;
}

.h-card-text {
   font-size: 24px;
   font-weight: 300;
   line-height: 25px;
   margin-top: 10px;
   overflow-wrap: break-word;
   color: black;
   width: 165px;
}

.h-card-text.h-small {
   font-size: 20px;
   line-height: 21px;
}

.h-card-read-link {
   text-decoration: none;
   margin-top: auto;
}

.h-card-read {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 6px;
   position: relative;
   text-align: right;
   text-transform: uppercase;
   color: grey
}

.h-card-read::after {
   background-color: grey;
   content: "";
   display: block;
   height: 1px;
   position: absolute;
   top: 9px;
   width: 55%;
}

.h-card-bottom {
   position: absolute;
   bottom: 20px;
   width: 42%;
}

.h-card-info {
   color: #aaa;
   font-size: 16px;
}

.h-card-info div {
   float: right;
   margin-right: 5px;
}

.h-card-info span {
   top: -2px;
   margin-right: 5px;
}

.h-card-media {
   width: 170px;
   height: 200px;
   padding: 20px 20px 0 0;
   object-fit: cover;
   float: right;
}


.h-card-media-contain {
   object-fit: contain;
}

.h-card-media-dim {
   opacity: 0.5;
}



/* ### Handy Portrait Mode ### */

@media only screen and (orientation:portrait) {
   .h-mobile .r-listview {
      padding-top: 20px;
   }
   .h-mobile .r-listview .k-listview-item {
      width: 790px !important;
      height: 360px;
   }
   .h-mobile .h-card-media {
      width: 255px;
      height: 320px;
   }
   .h-mobile .h-card-body {
      width: 450px;
   }
   .h-mobile .h-card-title {
      font-size: 28px;
   }
   .h-mobile .h-card-info {
      font-size: 26px;
   }
   .h-mobile .h-card-text {
      font-size: 40px;
      line-height: 42px;
      width: 470px;
   }
   .h-mobile .h-card-bottom {
      width: 470px;
   }
   .h-mobile .h-card-read {
      font-size: 26px;
      line-height: 26px;
      width: 470px;
   }
   .h-mobile .h-card-read::after {
      width: 65%;
      margin-top: 3px;
   }
}