.social,
.subscription {
	width: 100%;
	
	@include display-flex();
	@include flex-align(center);
	@include media-breakpoint-down(lg) {
		display: block;
	}
	
	& .social-list,
	& .social-intro,
	& .subscription-intro,
	& .subscription-form {
    width: 50%;
    
    @include media-breakpoint-down(lg) {
    	width: auto;
    }
	}
	& .subscription-form {
		padding: 0 rem(30px) 0 rem(30px);
		
		@include media-breakpoint-down(lg) {
			padding: rem(15px) 0 0;
		}
	}
	& .social-intro,
	& .subscription-intro {
		& h4 {
			margin: 0;
			font-weight: 600;
			font-size: rem(18px);
		}
		& p {
			color: lighten($black, 30%);
			margin: 0;
		}
	}
	& .social-list {
		text-align: center;
		
		@include media-breakpoint-down(lg) {
			text-align: left;
			margin-top: rem(15px);
		}
		
		& a {
			color: lighten($black, 50%);
			font-size: rem(24px);
			
			& + a {
				margin-left: rem(20px);
			}
			&:hover,
			&:focus {
				color: $dark;
				text-decoration: none;
			}
		}
	}
}