$m: 'section';

.#{$m} {
	padding-bottom: 50px;
	width: 100%;

	&__content {
		width: 100%;
		max-width: $content-max-width;
    	padding: 0 20px;
		margin: 0 auto;
	}

	&--intro-lead {
		text-align: center;
		.#{$m} {
			&__icon {
				display: inline-block;
			}
			&__title {
				@include font-title-xlarge();
				margin-bottom: 10px;
			}
			&__lead {
				display: inline-block;
				@include font-lead();
				max-width: 500px;
				color: $color-gray-dark;
			}
			&__intro {
				margin-bottom: 50px;
			}
		}
		.member-list {
			margin-top: 40px;
		}
	}

	&--claim {
		text-align: center;
		.#{$m} {
			&__icon {
				display: inline-block;
			}

			&__title {
				@include font-title-xxlarge();
				margin-bottom: 20px;
			}
			&__lead {
				@include font-title-xlarge-subline();
				color: $color-gray-dark;
			}
		}
	}

	&--gray-light-bg {
		padding-top: 50px;
		margin-bottom: 50px;
		background: $color-gray-light;
	}

	&--cta {
		text-align: center;
	}

	&--home-cta {
		text-align: center;
		padding-bottom: 60px;
		width: 100%;
		@include mq($to: small) { // optical
			text-align: left;
			padding: 0 30px;
		}
		@include mq($to: extrasmall) {
			padding: 0;
		}

		.#{$m} {
			&__title {
				@include font-title-xlarge();
				margin-bottom: 20px;
			}
			&__lead {

				@include font-lead();
				color: $color-gray-dark;
			}
			&__btn-grp {
				margin: 30px 0 20px;
				@include mq($to: 600px) { // optical
					& > * {
						width: 100%;
					}
				}
			}
			&__content {
				max-width: 860px;
			}
		}
	}

	&--post {
		.#{$m} {
			&__sidebar {
				display: block;
				width: 100%;
				margin-top: pxToRem(120px);
				margin-left: pxToRem(-20px);
				margin-right: pxToRem(-20px);

				.featurepost {
					max-width: 100%;
					@include mq($from: small, $to: medium) {
						width: 49%;
					}

					margin-bottom: pxToReM(60px);

					@include mq($to: medium) {
						&__preview {
							display: block;
							height: 1px;
						}
					}
				}
				&-title {
					@include font-claim();
					text-align: center;
					margin-bottom: pxToRem(40px);

					@include mq($from: medium) {
						@include visuallyhidden();
					}
				}

				@include mq($from: medium) {
					display: inline-block;
					width: 30%;
					vertical-align: top;
					margin: 0;
					padding-left: pxToRem(40px);
				}

			}

			&__main {
				display: inline-block;
				width: 69%;
				vertical-align: top;

				@include mq($to: medium) {
					width: 100%;
				}
			}
		}
	}
}