div.img_div{
    height: 0;
    padding-bottom: 67%;
    position: relative;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}
div.larger > div.img_div{
    height: 0;
    padding-bottom: 33%;
    position: relative;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

div.img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 10px 30px 10px 30px;
    background-size: cover;
}

div.img.youth_college{
    background-image: url('adult_generation/cnb_67_2.png');
}

div.img.singles{
    background-image: url('adult_generation/singles_67.png');
}

div.img.seniors{
    background-image: url('adult_generation/adult_33.png');
}

div.img_div.youth_college,
div.img_div.singles{
    /* padding-bottom: 75%; */
}


div.row > div{
    /* padding:0; */
}

div.vertical-middle{
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.2);
    border-radius: 10px 30px 10px 30px;
}

div.filter{
    position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/* background-color: rgba(0, 0, 0, 0.4); */
	opacity: 0.6;
    border-radius: 10px 30px 10px 30px;
	-webkit-transition: opacity 0.2s ease;
	-o-transition: opacity 0.2s ease;
	transition: opacity 0.2s ease;
}


  
div.img.seniors:hover > div.filter.seniors 
{
	background: linear-gradient(
	  to right,
	  rgba(36, 198, 220, 0.6),
	  rgba(81, 74, 167, 0.6)
	);
}

div.img.youth_college:hover > div.filter.youth_college 
{
	background: linear-gradient(
		to right,
		rgba(138, 35, 135, 0.6),
		rgba(233, 64, 87, 0.6),
		rgba(242, 113, 33, 0.6)
	  );
	}

div.img.singles:hover > div.filter.singles 
{
	background: linear-gradient(
		to right,
		rgba(255, 78, 80, 0.6),
		rgba(249, 212, 35, 0.6)
	  );
}


@media (max-width:767.9px) {
    div.larger > div.img_div{
        padding-bottom: 40%;
    }   
    div.img.seniors{
        background-image: url('adult_generation/adult_40.jpg');
    }

    div.img.youth_college{
        background-image: url('adult_generation/cnb_40.png');
    }
    
    div.img.singles{
        background-image: url('adult_generation/singles_40.jpg');
    }
    
    div.img_div{
        padding-bottom: 40%;
    }      
}