/* Sytles for heading */

.heading {
  @include padding((_size(section-spacing)) * 0, _size(section-spacing));
		background: _palette(bg);
		border: solid 1px _palette(border);
		margin: 0 0 (_size(section-spacing) * 0.25 ) 0;
		position: relative;

		> header {
			@include vendor('display', 'flex');
			border-bottom: solid 1px _palette(border);
			left: (_size(section-spacing) * -1);
			margin: (_size(section-spacing) * -1) 0 _size(section-spacing) 0;
			position: relative;
			width: calc(100% + #{_size(section-spacing) * 2});

			.title {
				@include vendor('flex-grow', '1');
				-ms-flex: 1;
				padding: (_size(section-spacing) * 1.25) _size(section-spacing) (_size(section-spacing) * 1.1) _size(section-spacing);

				h2 {
					font-weight: _font(weight-heading-extrabold);
					font-size: 1.5em;
				}

				> :last-child {
					margin-bottom: 0;
				}
			}
    }
    @include breakpoint('<=medium') {
			border-left: 0;
			border-right: 0;
			left: _size(section-spacing) * -1;
			width: calc(100% + (#{_size(section-spacing)} * 2));

			> header {
				@include vendor('flex-direction', 'column');
				@include padding(_size(section-spacing) * 1.25, _size(section-spacing), (0, 0, -0.5em, 0));
				border-left: 0;

				.title {
					-ms-flex: 0 1 auto;
					margin: 0 0 _size(element-margin) 0;
					padding: 0;
					text-align: center;
				}
			}
		}

		@include breakpoint('<=small') {
			@include padding(_size(section-spacing-small), _size(section-spacing-small));
			left: _size(section-spacing-small) * -1;
			margin: 0 0 (_size(section-spacing) * 0.15 ) 0;
			width: calc(100% + (#{_size(section-spacing-small)} * 2));

			> header {
				@include padding(_size(section-spacing-small) * 2, _size(section-spacing-small), (0, 0, -0.5em, 0));
				left: (_size(section-spacing-small) * -1);
				margin: (_size(section-spacing-small) * -1) 0 _size(section-spacing-small) 0;
				width: calc(100% + #{_size(section-spacing-small) * 2});

				.title {
					h2 {
						font-size: 1.1em;
					}
				}
			}
		}
  }