.page-node-type-page {
	// Homepage promo styling
	&.path-frontpage {
		.field--name-field-section > .field__item:first-child {
			border-bottom: 1px solid $border-color;
			.section-dark {
				background: $color-zeta;
			}
		}
		.promo-container {
			height: 350px !important;
      .swiper-slide {
        .container.inner {
          height: 350px;
        }
      }
		}
		.slideshow-title {
			text-align: left;
			@include breakpoint($breakpoint-m) {

      }

			.title {
		  	font-family: $base-font;
        font-weight: 600;
		  	@include breakpoint($breakpoint-l){
		  		font-size: 46px;
		  	}
	    }
	  }
	  .promo-text {
	  	text-align: left;
	  	h2 {
        font-size: 20px;
        font-weight: 400;
		  	@include breakpoint($breakpoint-m){
		  		font-size: 26px;
		  	}
		  	@include breakpoint($breakpoint-l){
		  		font-size: 28px;
		  	}
		  }
	  }
    .promo-button {
      text-align: left;
    }
	}
}

.node--type-page {
	.field--name-field-summary {
		@include breakpoint($breakpoint-m) {
		  // margin: 0 200px;
		}
	}

	.field--name-field-section {
		.field__item {
  	  @include clearfix;
    }
	}
}

.field--name-field-ref-content {
	margin: 25px 0 0;
	& > .field__label {
		text-align: center;
	}
	& > .field__items,
	& > .field__item {
		display: flex;
		flex-wrap: wrap;
    justify-content: center;
    @include breakpoint($breakpoint-m) {
    	justify-content: flex-start;
    	max-width: 680px;
    	margin: 0 auto;
    }
    @include breakpoint($breakpoint-l) {
    	max-width: 1000px;
    }
    @include breakpoint($breakpoint-xl) {
    	max-width: 1210px;
    }
    & > .field__item {
			display: inline-block;
			vertical-align: top;
			margin: 15px;
			@include breakpoint($breakpoint-l) {
	    	margin: 15px 10px;
	    }
			@include breakpoint($breakpoint-xl) {
	    	margin: 25px;
	    }
	  }
	}
	.field--name-body {
		margin: 0;
		max-width: 100%;
	}
}