.custom-tiles {
	display: flex;
	flex-wrap: wrap;
}
.custom-tiles .slide {
    position: relative;
    flex: 0 0 33.33%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.custom-tiles .slide::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid white;
    z-index: 4;
    opacity: 0;
    transition: all 0.5s ease-in;
    pointer-events:none;
}
.custom-tiles .slide:hover::before {
    opacity: 1;
    transition: all 0.5s ease-out;
}
.custom-tiles .slide img{
    width: 100%;
    transition: all 0.8s ease-in;
}
.custom-tiles .slide:hover img{
    transform: scale(1.05);
    transition: all 0.8s ease-out;
}
.custom-tiles .slide a {
	width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.custom-tiles .slide .tile-img {
    width: 100%;
    filter: brightness(.85);
    transition: all 0.8s ease-in;
}
.custom-tiles .slide .content {
	position: absolute;
	z-index: 4;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 0 20px;
}
.custom-tiles .slide h6 {
	color: white;
	font-size: 32px;
	line-height: 35px;
}

@media(max-width: 640px){
	.custom-tiles {
		display: block;
	}
}

@media(max-width: 480px){
	.custom-tiles .slide h6 {
		font-size: 30px;
		line-height: 25px;
	}
}
.custom-tiles .slide .overlay {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.custom-tiles .slide:hover .overlay{
    background-color: var(--color-background-primary);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    opacity: .6;
    transition: opacity 0.5s ease-out;
}
.custom-tiles .slide:nth-child(5n+1) .overlay{
    background-color: var(--secondary-orange);
}
.custom-tiles .slide:nth-child(5n+2) .overlay{
    background-color: var(--secondary-pink);
}
.custom-tiles .slide:nth-child(5n+3) .overlay{
    background-color: var(--secondary-purple);
}
.custom-tiles .slide:nth-child(5n+4) .overlay{
    background-color: var(--secondary-dark-blue);
}
.custom-tiles .slide:nth-child(5n+5) .overlay{
    background-color: var(--secondary-blue);
}

.green-stem .custom-tiles .slide:nth-child(7n+1) .overlay{
    background-color: #76c244;
}
.green-stem .custom-tiles .slide:nth-child(7n+2) .overlay{
    background-color: #efb82a;
}
.green-stem .custom-tiles .slide:nth-child(7n+3) .overlay{
    background-color: #938c60;
}
.green-stem .custom-tiles .slide:nth-child(7n+4) .overlay{
    background-color: #0071ad;
}
.green-stem .custom-tiles .slide:nth-child(7n+5) .overlay{
    background-color: #eb702d;
}
.green-stem .custom-tiles .slide:nth-child(7n+6) .overlay{
    background-color: #4d9e42;
}
.green-stem .custom-tiles .slide:nth-child(7n+7) .overlay{
    background-color: #236130;
}

.rainbow .custom-tiles .slide:nth-child(7n+1) .overlay{
    background-color: #00BDF9;
}
.rainbow .custom-tiles .slide:nth-child(7n+2) .overlay{
    background-color: #EF0A04;
}
.rainbow .custom-tiles .slide:nth-child(7n+3) .overlay{
    background-color: #FF6A2D;
}
.rainbow .custom-tiles .slide:nth-child(7n+4) .overlay{
    background-color: #FFDA37;
}
.rainbow .custom-tiles .slide:nth-child(7n+5) .overlay{
    background-color: #009648;
}
.rainbow .custom-tiles .slide:nth-child(7n+6) .overlay{
    background-color: #9639CD;
}
.rainbow .custom-tiles .slide:nth-child(7n+7) .overlay{
    background-color: #E4008D;
}

.legacy-project .custom-tiles .slide .overlay{
    background-color: var(--color-legacy-pink);
}

.legacy-project .custom-tiles .slide:nth-child(even) .overlay {
    background-color: var(--color-legacy-teal);
}