.tile {
    text-align: center;
    margin-bottom: 20px;
    padding-right: 10px;
    padding-left: 10px;
}

@media (max-width: 768px) {
    .tile {
        padding-right: 0;
        padding-left: 0;
    }
}

.tile-inner img {
    width: 100%;
    /*height: 200px;*/
}

a.tile-inner {
  display: block;
}

.tile-inner.gray {
    background-color: #EDEDEC;
}

.tile-inner.clickable {
    cursor: pointer;
}

.tile-desc {
    padding: 0 10px 10px 10px;
}

    .tile-desc.left-text {
        text-align: left;
    }

    .tile-desc h4 {
        font-size: 18px;
        height: 26px;
    }

        .tile-desc h4.high {
            height: 54px;
        }

    .tile-desc h5 {
        font-size: 17px;
        height: 26px;
    }

    .tile-desc p.text-flow {
        height: 120px;
        overflow: hidden;
    }

.tile-inner.gray .tile-desc p.text-flow:after {
    content: "";
    text-align: right;
    position: absolute;
    bottom: 45px;
    right: 10px;
    width: 35%;
    height: 22px;
    background: linear-gradient(to right, rgba(237, 237, 236, 0), rgb(237, 237, 236) 50%);
}

.tile-desc p.text-flow:after {
    content: "";
    text-align: right;
    position: absolute;
    bottom: 45px;
    right: 20px;
    width: 35%;
    height: 22px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
}

.tile a {
  text-decoration: none;
}

.tile-desc a {
  text-decoration: none;
  font-weight: 700;
}

.tile i {
    text-decoration: none;
    font-weight: 700;
    margin-left: 7px;
}