.tiles {
    margin-bottom: 30px;
    overflow: hidden;
}

.tiles .inner {
    position: relative;
}

.tiles .cols {
    margin-bottom: 30px;
}

.tiles .cols .slide {
    margin-bottom: 15px;
    overflow: hidden;
}

.tiles .inner .content-section {
    position: absolute;
    top: 5px;
    left: 5%;
    z-index: 100;
}
@media(min-width: 769px){
    .tiles .inner .content-section {
        top: 20px;
    }
}
.tiles .cols .img-cont {
    position: relative;
    max-height: 100%;
    z-index: 1;
}

.tiles .cols .img-cont::after {
    content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 70%;
	background: linear-gradient(to bottom, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    overflow: hidden;
}

.tiles .cols .shared-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.tiles .shared-play-button i {
    color: #fff;
    font-size: 45px;
}

.tiles .inner .content-section h4,
.tiles .inner .content-section h4 a {
    color: #fff;
    text-transform: lowercase;
    font-size: 24px;
    text-shadow: 1px 1px 10px rgba(0,0,0,0.85), -1px -1px 10px rgba(0,0,0,0.85);
    text-decoration: none;
    z-index: 10;
    line-height: 30px;
}
.tiles .slide .img-cont img {
    width: 100%;
}
@media (min-width: 769px) {
    .tiles .cols {
        display: flex;
        justify-content: flex-start;
        align-content: space-between;
        flex-flow: row wrap;
        margin: 0 -15px;
    }

    .tiles .cols .slide {
        width: calc((100vw - 77px) / 3);
        margin-bottom: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        margin: 15px;
    }



    .tiles .cols .slide,
    .tiles .cols .slide .img-cont {
        border-radius: 20px;
    }

    .tiles .inner .content-section h4,
    .tiles .inner .content-section h4 a {
        line-height: 1.1;
        font-size: calc(16px + (25 - 16) * (100vw - 641px) / (1025 - 641));
    }

    .tiles .cols .shared-play-button {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .tiles .cols .shared-play-button i {
        font-size: calc(20px + (45 - 20) * (100vw - 641px) / (1024 - 641));
    }

    .tiles .cols .inner:hover .content-section h4,
    .tiles .cols .inner:hover .content-section h4 a {
        color: #fff0c7;
    }

    .tiles .cols .slide:nth-child(3n + 1):hover .img-cont:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(111,154,211);
        opacity: 0.8;
        border-radius: 0 20px 20px 0;
    }

    .tiles .cols .slide:nth-child(3n + 2):hover .img-cont:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(111,154,211);
        opacity: 0.8;
        border-radius: 20px;
    }

    .tiles .cols .slide:nth-child(3n + 3):hover .img-cont:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(111,154,211);
        opacity: 0.8;
        border-radius: 20px 0 0 20px;
    }

    .tiles .cols .img-cont img {
        transition: all .3s ease-in-out;
    }

    .tiles .cols .img-cont:hover img {
        transform: scale(1.2);
    }
    .tiles .cols {
        margin: 0 -5.5vw;
        width: 115vw;
        overflow: hidden;
    }
    .tiles .cols .slide {
        width: calc((100% - 120px) / 3);
        margin-bottom: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        margin: 0 20px 40px;
    }
    .tiles .cols .slide:nth-child(3n+2) {
        width: calc(((100% - 120px) / 3) - 4%);
    }
    .tiles .cols .slide .img-cont {
        transform: scale(1.1);
    }
    .tiles .slide:nth-child(3n+1) .inner .content-section{
        left:20%;
    }
    .tiles .slide .inner .content-section{
        max-width:70%;
    }
}

@media (min-width: 1025px) {
    .tiles .inner .content-section h4,
    .tiles .inner .content-section h4 a {
        font-size: calc(30px + (35 - 30) * (100vw - 1026px) / (1980 - 1025));
    }

    .tiles .cols .shared-play-button i {
        font-size: 60px;
    }

}