/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./template-parts/blocks/triple-image/triple-image.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*******************************************/
/*******************************************/
.triple-image {
  position: relative;
  --ti-pad-top: 168px;
  --ti-content-pad-top: clamp(172px, -0.5714285714px + 16.8526785714vw, 323px);
  --ti-layer-h: clamp(550px, -0.8571428571px + 53.7946428571vw, 1032px);
  --ti-title-top: clamp(292px, 95.4285714286px + 19.1964285714vw, 464px);
  padding: var(--ti-pad-top) 0 calc(var(--ti-content-pad-top) - var(--ti-pad-top)) 0;
}
@media (max-width: calc(64rem - 0.99px)) {
  .triple-image {
    padding-top: 138px;
    padding-bottom: 70px;
  }
}
.triple-image .triple-image--grid {
  position: relative;
}
@media (max-width: calc(64rem - 0.99px)) {
  .triple-image .triple-image--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 45px 13px;
    grid-template-areas: "img1 img1" "header header" "img3 img2" "content content";
  }
}
.triple-image .triple-image--header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: var(--ti-layer-h);
  position: relative;
  z-index: 1;
  grid-area: header;
}
@media (max-width: calc(64rem - 0.99px)) {
  .triple-image .triple-image--header {
    min-height: auto;
    padding-top: 0;
    padding-bottom: 0;
  }
}
.triple-image .triple-image--header .triple-image--title {
  color: #f9f7fd;
  font-weight: 800;
  text-transform: uppercase;
  padding-top: calc(var(--ti-title-top) - var(--ti-pad-top));
  margin: 0;
}
@media (max-width: calc(64rem - 0.99px)) {
  .triple-image .triple-image--header .triple-image--title {
    padding-top: 0;
  }
}
.triple-image .triple-image--header .triple-image--desc {
  color: #f9f7fd;
  font-family: "Epilogue", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: clamp(24px, 1.875vw, 30px);
  max-width: 60ch;
  margin: 12px 0 0 0;
}
.triple-image .triple-image--content {
  padding-top: var(--ti-content-pad-top);
  grid-area: content;
}
@media (max-width: calc(84.375rem - 0.99px)) {
  .triple-image .triple-image--content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}
@media (max-width: calc(64rem - 0.99px)) {
  .triple-image .triple-image--content {
    padding-top: 85px;
  }
}
.triple-image .triple-image--content .triple-image--content-inner {
  max-width: 1230px;
  width: 100%;
  padding-left: 200px;
}
@media (max-width: calc(84.375rem - 0.99px)) {
  .triple-image .triple-image--content .triple-image--content-inner {
    padding-left: 0;
    max-width: 1030px;
  }
}
@media (max-width: calc(64rem - 0.99px)) {
  .triple-image .triple-image--content .triple-image--content-inner {
    max-width: 830px;
  }
}
@media (max-width: calc(48rem - 0.99px)) {
  .triple-image .triple-image--content .triple-image--content-inner {
    max-width: 100%;
  }
}
.triple-image .triple-image--content .triple-image--content-inner p {
  color: #f9f7fd;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}
@media (max-width: calc(48rem - 0.99px)) {
  .triple-image .triple-image--content .triple-image--content-inner p {
    text-align: center;
  }
}
.triple-image .triple-image--content .triple-image--content-inner p:last-child {
  margin-bottom: 0;
}
.triple-image .triple-image--image {
  z-index: 0;
  overflow: hidden;
  border-radius: 24px;
}
@media (min-width: 64rem) {
  .triple-image .triple-image--image {
    position: absolute;
  }
}
.triple-image .triple-image--image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  display: block;
}
.triple-image .triple-image--image.pos-1 {
  grid-area: img1;
}
@media (min-width: 64rem) {
  .triple-image .triple-image--image.pos-1 {
    top: 0;
    left: 0;
    width: clamp(308px, 0.5714285714px + 30.0223214286vw, 577px);
    aspect-ratio: 1.9760273973;
  }
}
.triple-image .triple-image--image.pos-2 {
  grid-area: img2;
}
@media (min-width: 64rem) {
  .triple-image .triple-image--image.pos-2 {
    top: 0;
    right: 0;
    width: clamp(262px, -0.8571428571px + 25.6696428571vw, 492px);
    aspect-ratio: 0.6968838527;
  }
}
.triple-image .triple-image--image.pos-3 {
  grid-area: img3;
}
@media (min-width: 64rem) {
  .triple-image .triple-image--image.pos-3 {
    top: clamp(316px, -0.5714285714px + 30.9151785714vw, 593px);
    left: clamp(213px, -0.7142857143px + 20.8705357143vw, 400px);
    width: clamp(233px, -0.1428571429px + 22.7678571429vw, 437px);
    aspect-ratio: 0.8077634011;
  }
}
.triple-image {
  /* // Switch to your “mobile screenshot” layout under 1024px
  @media (max-width: 1023.98px) {
  	padding: 40px 0 60px 0;

  	.triple-image--grid {

  		gap: 24px;


  	}

  	.triple-image--header {

  		min-height: auto;
  	}

  	.triple-image--title {
  		padding-top: 0;
  	}

  	.triple-image--content {
  		grid-area: content;
  		padding-top: 0;
  	}

  	// Reset absolute positioning so images flow in the grid
  	.triple-image--image {
  		position: relative;
  		top: auto;
  		left: auto;
  		right: auto;
  		width: 100%;
  	}

  	.triple-image--image.pos-1 {

  		aspect-ratio: 577 / 292; // wide hero
  	}

  	.triple-image--image.pos-3 {
  		grid-area: img3;
  		aspect-ratio: 1 / 1; // square cards like screenshot
  	}

  	.triple-image--image.pos-2 {
  		grid-area: img2;
  		aspect-ratio: 1 / 1; // square cards like screenshot
  	}
  } */
}

/*# sourceMappingURL=triple-image.css.map*/