// postcards
.hero-postcards {
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  height: max(100vh, 500px);
  overflow-x: hidden;
  overflow-y: visible;
}

.postcard {
  aspect-ratio: 1.7 / 1;
  object-fit: cover;
  border: solid 3px white;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.2); 
  box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.2);
}

.postcard-pair {
  position: absolute;
  width: 100vw;
  top: 0;
  height: max(100vh, 500px);
  overflow-x: hidden;
  overflow-y: visible;
}

.postcard-pair-left {
  left: 0;
}

.postcard-pair-right {
  right: 0;
}

.postcard {
  position: absolute;
}

.postcard--1 {
	z-index: 901;
	object-position: center 65%;
}
.postcard--3 {
	z-index: 902;
}
.postcard--2 {
	z-index: 903;
}
.postcard--4 {
	z-index: 902;
}

@media (max-width: 419px) {
  .postcard {
	height: 80px;
  }
  
  .postcard--1 {
	left: -10px;
	top: 132px;
	transform: rotate(-8deg);
  }
  
  .postcard--3 {
	left: 15px;
	top: 82px;
	transform: rotate(8deg);
  }
  
  .postcard--2 {
	right: -10px;
	top: 132px;
	transform: rotate(8deg);
  }
  
  .postcard--4 {
	right: 15px;
	top: 82px;
	transform: rotate(-8deg);
  }
  
  .hero .content {
	padding-top: 30px !important;
  }
}

@media (max-width: 419px) and (min-height: 720px) {
  .postcard {
	height: 90px;
  }

  .postcard--1,
  .postcard--2 {
	top: 142px;
  }
}

@media (min-width: 420px) and (max-width: 599px) {
  .postcard {
	height: 80px;
  }
  
  .postcard--1 {
	left: 0;
	top: 122px;
	transform: rotate(-10deg);
  }
  
  .postcard--3 {
	left: 35px;
	top: 72px;
	transform: rotate(10deg);
  }
  
  .postcard--2 {
	right: 0;
	top: 122px;
	transform: rotate(10deg);
  }
  
  .postcard--4 {
	right: 35px;
	top: 72px;
	transform: rotate(-10deg);
  }
}

@media (min-width: 420px) and (max-width: 599px) and (min-height: 720px) {
  .postcard {
	height: 90px;
  }

  .postcard--1,
  .postcard--2 {
	top: 132px;
  }
}

@media (min-width: 600px) and (max-width: 749px) {
  .postcard {
	height: 80px;
  }
  
  .postcard--1 {
	left: 0;
	top: 122px;
	transform: rotate(-10deg);
  }
  
  .postcard--3 {
	left: 35px;
	top: 72px;
	transform: rotate(10deg);
  }
  
  .postcard--2 {
	right: 0;
	top: 122px;
	transform: rotate(10deg);
  }
  
  .postcard--4 {
	right: 35px;
	top: 72px;
	transform: rotate(-10deg);
  }
  
  .hero .content {
	padding-top: 40px !important;
  }
}

@media (min-width: 666px) and (max-width: 749px) and (min-height: 720px) {
  .postcard {
	height: 90px;
  }

  .postcard--1,
  .postcard--2 {
	top: 132px;
  }
}

@media (min-width: 600px) and (max-width: 700px) and (min-height: 501px) {
  .hero .content {
	padding-top: 75px !important;
  }
}

@media (min-width: 750px) and (max-width: 821px) {
  .postcard {
	height: 85px;
  }
  
  .postcard--1 {
	left: 0;
	top: 122px;
	transform: rotate(-10deg);
  }
  
  .postcard--3 {
	left: 35px;
	top: 72px;
	transform: rotate(10deg);
  }
  
  .postcard--2 {
	right: 0;
	top: 122px;
	transform: rotate(10deg);
  }
  
  .postcard--4 {
	right: 35px;
	top: 72px;
	transform: rotate(-10deg);
  }
  
  .hero .content {
	padding-top: 30px !important;
  }
}

@media (min-width: 750px) and (max-width: 821px) and (min-height: 720px) {
  .postcard {
	height: 95px;
  }

  .postcard--1,
  .postcard--2 {
	top: 132px;
  }
}

@media (min-width: 900px) and (max-width: 1024px) {
  .postcard--1 {
	top: 132px !important;
	left: 0;
	transform: rotate(-10deg);
  }
  
  .postcard--2 {
	top: 132px !important;
	right: 0;
	transform: rotate(10deg);
  }
}

@media (min-width: 900px) and (max-width: 1024px) and (min-height: 720px) {
  .postcard--1,
  .postcard--2 {
	top: 142px !important;
  }
}

@media (min-width: 822px) and (max-width: 1024px) {
  .postcard {
	height: 85px;
  }
  
  .postcard--1 {
	left: 0;
	top: 122px;
	transform: rotate(-10deg);
  }
  
  .postcard--3 {
	left: 35px;
	top: 72px;
	transform: rotate(10deg);
  }
  
  .postcard--2 {
	right: 0;
	top: 122px;
	transform: rotate(10deg);
  }
  
  .postcard--4 {
	right: 35px;
	top: 72px;
	transform: rotate(-10deg);
  }
  
  .hero .content {
	padding-top: 40px !important;
  }
}

@media (min-width: 822px) and (max-width: 1024px) and (min-height: 720px) {
  .postcard {
	height: 95px;
  }

  .postcard--1,
  .postcard--2 {
	top: 132px;
  }
}

@media (min-width: 1025px) {
  .postcard {
	height: 85px;
  }
  
  .postcard--1 {
	left: 0;
	top: 135px;
	transform: rotate(-10deg);
  }
  
  .postcard--3 {
	left: 35px;
	top: 72px;
	transform: rotate(10deg);
  }
  
  .postcard--2 {
	right: 0;
	top: 135px;
	transform: rotate(10deg);
  }
  
  .postcard--4 {
	right: 35px;
	top: 72px;
	transform: rotate(-10deg);
  }
  
  .hero .content {
	padding-top: clamp(0px, calc(309.7222px - 27.7778vw), 25px) !important;
  }
  
  .hero .tagline {
	gap: 0px;
	max-width: none;
	margin-top: 0;
	padding-top: 0;
  }
  
  .hero .content .hero-cta {
	margin-top: 0;
  }
}

@media (min-width: 1025px) and (min-height: 720px) {
  .postcard {
	height: 95px;
  }

  .postcard--1,
  .postcard--2 {
	top: 145px;
  }
}

@media (min-width: 1150px) {
  .postcard {
	height: 100px;
  }
}

@media (min-width: 1150px) and (min-height: 720px) {
  .postcard {
	height: 110px;
  }
}

@media (min-width: 1190px) {
  .postcard {
	height: 105px;
  }
}

@media (min-width: 1190px) and (min-height: 720px) {
  .postcard {
	height: 115px;
  }
}

/* height > 720px, width 820px–920px: shift left/right in by -10px */
@media (min-width: 850px) and (max-width: 920px) and (min-height: 720px) {
  .postcard--1 {
	left: -10px;
  }

  .postcard--3 {
	left: 25px;
  }

  .postcard--2 {
	right: -10px;
  }

  .postcard--4 {
	right: 25px;
  }
}


@media (min-width: 820px) and (max-width: 849px) and (min-height: 720px) {
  .postcard--1 {
	left: -30px;
  }

  .postcard--3 {
	left: 5px;
  }

  .postcard--2 {
	right: -30px;
  }

  .postcard--4 {
	right: 5px;
  }
}

@media (max-width: 450px) and (min-height: 720px) {
	.postcard {
		height: 80px;
	}
	
	.postcard--1 {
		left: -30px;
		top: 137px;
	}
	
	.postcard--3 {
		left: -5px;
		top: 72px;
	}
	
	.postcard--2 {
		right: -30px;
		top: 137px;
	}
	
	.postcard--4 {
		right: -5px;
		top: 72px;
	}
}