// Icon Features component (Modules/ComponentIconFeatures).
// Four across on large screens, two on tablets, one on phones.
// Place it in a Full Width container: on wide screens the four features spread
// up to 1400px, wider than the default 1140px container allows.
.icon-features {
	@include media-breakpoint-up(xl) {
		max-width: 1400px;
		margin-left: auto;
		margin-right: auto;
	}

	&__item {
		margin-bottom: 3rem;

		@include media-breakpoint-up(lg) {
			margin-bottom: 0;
		}
	}

	// Fixed height, width follows the icon's own shape. object-fit stops it
	// being squashed if the column ever gets narrower than the icon.
	&__icon {
		display: block;
		height: 90px;
		width: auto;
		max-width: 100%;
		object-fit: contain;
		margin: 0 auto 2.25rem;
	}

	// Overrides the site-wide h3 style (uppercase, 2px letter spacing).
	// max-width makes titles like "Award-Winning Creativity" break onto two lines as in the design.
	&__title {
		font-family: $primary-font;
		font-weight: 500; // Medium
		font-size: 1.125rem;
		line-height: 1.35;
		text-transform: none;
		letter-spacing: normal;
		color: #7D7E80;
		max-width: 10em;
		margin: 0 auto 1rem;
	}

	&__text {
		font-family: $primary-font;
		font-weight: 300; // Book
		font-size: .875rem;
		line-height: 1.8;
		color: #7D7E80;
		max-width: 16.5rem;
		margin: 0 auto;

		p {
			font-size: inherit;
			line-height: inherit;
			color: inherit;
			margin-bottom: .5rem;

			&:last-child { margin-bottom: 0; }
		}
	}
}