/* Mobile styling first */
.frames {
	margin-bottom: 60px;
}

.frames .img-cont img {
	width: 100%;
}

.frames .cols .slide {
	transition: transform 350ms ease;
}

.frames .title-cont {
	text-align: center;
	padding: 0 20px;
}

.frames .title-cont h4 {
	font-family: 'Pacifico', serif;
	color: #e3ddd5;
	font-size: 63px;
	line-height: 58px;
	font-weight: 100;
}

.frames .title-cont h5 {
	font-family: 'Arvo', serif;
	color: #415968;
	font-size: 20px;
	line-height: 26px;
	margin-bottom: 10px;
}

.frames .title-cont p.view-all {
	font-family: 'futura-pt', sans-serif;
	color: #684f40;
	font-size: 16px;
	line-height: 18px;
	font-weight: 600
}

.frames .content-section .title h4,
.frames .content-section .title h4 a {
	font-family: 'Arvo', serif;
	color: #fff;
	font-size: 23px;
	line-height: 31px;
}

.frames .inner {
	position: relative;
}

.frames .inner .content-section {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	padding: 20px 38px;
}

.frames .inner .img-cont:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
	pointer-events: none;
}

/* Tablet 640+ */
@media only screen and (min-width: 40em) {
	.frames .cols {
		display: flex;
		flex-wrap: wrap;
	}
	
	.frames .title-cont {
		margin: 0 auto 50px;
	}
	.frames .cols .slide {
		flex: 0 1 50%;
	}
}



/* Desktop 1024+ */
@media only screen and (min-width: 64em) {

	.frames .title-cont {
		max-width: 850px;
	}

	.frames .title-cont h4 {
		font-size: 95px;
		line-height: 100px;
	}

	.frames .title-cont h5 {
		font-size: 27px;
		line-height: 35px;
	}

	.frames .title-cont p.view-all {
		font-size: 21px;
	}


	.frames .content-section .title h4, 
	.frames .content-section .title h4 a {
		font-size: 33px;
	}

	.frames .more-link img {
		height: 14px;
	}

	.frames .cols .slide {
		flex: 0 1 33.33%;
	}

    .frames .cols .slide .inner:before {
    	content: '';
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
    	border: 0 #b3bdc3 solid;
    	transition: border-width 350ms ease;
    	z-index: 2;
    	pointer-events: none;
    }
	.frames .cols .slide:hover .inner:before { border-width: 20px; }
	.frames .cols .slide .content-section {margin-bottom: 0;transition: margin-bottom 350ms ease;}
	.frames .cols .slide:hover .content-section { margin-bottom: 20px; }
    .frames .cols .slide a {
    	display: block;
    	position: relative;
    }
	

}