.expand-text-primary {
	position: relative;
}
.expand-text-primary button {
    display: none;
	margin: 20px auto;
}
.expand-text-primary button.see-more {
    padding: 10px;
    border-radius: 3px;
    background-color: #8ac6ab;
    font-family: var(--pitch);
    color: #363636;
    font-size: 13px;
}

@media (max-width: 40em) {
	.expand-text-primary.mobile .text-mask {
		max-height: 420px;
		overflow: hidden;
	    position: relative;
	    -webkit-transition: all 250ms ease-in-out;
	    -moz-transition: all 250ms ease-in-out;
	    -o-transition: all 250ms ease-in-out;
	    transition: all 250ms ease-in-out;
	}
	.expand-text-primary.mobile .text-mask:after {
		content: '';
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    width: 100%;
	    height: 25%;
	    background: linear-gradient(transparent, white);
	    -webkit-transition: all 250ms ease-in-out;
	    -moz-transition: all 250ms ease-in-out;
	    -o-transition: all 250ms ease-in-out;
	    transition: all 250ms ease-in-out;
    }
    .expand-text-primary.active.mobile .text-mask:after {
        pointer-events: none;
	}
	.expand-text-primary.mobile.active .text-mask:after {
		opacity: 0;
		-webkit-transition: all 250ms ease-in-out;
	    -moz-transition: all 250ms ease-in-out;
	    -o-transition: all 250ms ease-in-out;
	    transition: all 250ms ease-in-out;
	}
	.expand-text-primary.mobile button {
	    display: block;
	}
}

@media (min-width: 40.063em) and (max-width: 64em) {
    
	.expand-text-primary.tablet .text-mask {
		max-height: 420px;
		overflow: hidden;
	    position: relative;
	    -webkit-transition: all 250ms ease-in-out;
	    -moz-transition: all 250ms ease-in-out;
	    -o-transition: all 250ms ease-in-out;
	    transition: all 250ms ease-in-out;
	}
	.expand-text-primary.tablet .text-mask:after {
		content: '';
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    width: 100%;
	    height: 25%;
	    background: linear-gradient(transparent, white);
	    -webkit-transition: all 250ms ease-in-out;
	    -moz-transition: all 250ms ease-in-out;
	    -o-transition: all 250ms ease-in-out;
	    transition: all 250ms ease-in-out;
	}
	.expand-text-primary.tablet.active .text-mask:after,
	.expand-text-primary.tablet.active .text-mask p:after {
		opacity: 0;
		-webkit-transition: all 250ms ease-in-out;
	    -moz-transition: all 250ms ease-in-out;
	    -o-transition: all 250ms ease-in-out;
	    transition: all 250ms ease-in-out;
	}
	.expand-text-primary.tablet button {
	    display: block;
	}
}

@media (min-width: 64.063em) {
	.expand-text-primary.desktop .text-mask {
		max-height: 420px;
		overflow: hidden;
	    position: relative;
	    -webkit-transition: all 250ms ease-in-out;
	    -moz-transition: all 250ms ease-in-out;
	    -o-transition: all 250ms ease-in-out;
	    transition: all 250ms ease-in-out;
	}
	.expand-text-primary.desktop .text-mask:after {
		content: '';
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    width: 100%;
	    height: 25%;
	    background: linear-gradient(transparent, white);
	    -webkit-transition: all 250ms ease-in-out;
	    -moz-transition: all 250ms ease-in-out;
	    -o-transition: all 250ms ease-in-out;
	    transition: all 250ms ease-in-out;
	}
	.expand-text-primary.desktop.active .text-mask:after,
	.expand-text-primary.desktop.active .text-mask p:after {
		opacity: 0;
		-webkit-transition: all 250ms ease-in-out;
	    -moz-transition: all 250ms ease-in-out;
	    -o-transition: all 250ms ease-in-out;
	    transition: all 250ms ease-in-out;
	}
	.expand-text-primary.desktop button {
	    display: block;
	}
}