.promo {
    @include hex__outer;
    color: $brand-white;
	margin-bottom: 25%;
	
	@include breakpoint($sm) {
		width: 33.333%;
		margin-left: 0;
		margin-bottom: 0;
		
		&:nth-of-type(5n-4) {
			margin-left: 16.666%;
		}
	}
    
    
    .hex-grid--offset & {

        @include breakpoint($md) {
            &:first-of-type {
                margin-left: 25%;
            }
        
            &:nth-of-type(5n-4) {
                margin: 0;
            }
            
            &:nth-of-type(7n-3) {
                margin-left: 16.66667%;
            }
        }
    }
}
.promo__inner {
	@include hex__middle;
}
.promo__content {
    @include hex__inner;
	
	&:hover, 
    &:focus,
    .promo--closed & {
		.promo__title,
		.promo__body {
			transform: translate3d(0,0,0);
		}
    }
}
.promo__title, 
.promo__body {
    width: 100%;
    padding: 5%;
    box-sizing: border-box;
    background-color: fade-out($brand-color-e, 0.1);
    font-weight: 300;
    transition: transform .2s ease-in-out, opacity .3s ease-in-out;
}
.promo__title {
    margin-bottom: 0;
    bottom: 55%;
    padding-top: 50%;

	@include breakpoint($sm) {
        transform: translate3d(0,-100%,0);
    }
    
    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 45%;
        width: 10%;
        text-align: center;
        border-bottom: 1px solid #fff;
    }
}
.promo__body {
    top: 45%;
    padding-bottom: 50%;
    
	@include breakpoint($sm) {
        transform: translate3d(0,100%,0);
    }
}

.promo__media {
    mix-blend-mode: overlay;
}

@each $index, $color in $brand-colors {
    .promo--theme-#{$index} {
        .promo__content {
            background-color: fade-out($color, 0.7);
        }

        .promo__title, 
        .promo__body {
            background-color: fade-out(shade($color, 15%), 0.2);
        }
    }
}