.dyad-slideshow.heart-slideshow {
	height: 100vh;
	min-height: 100lvh;
}

.heart-slideshow-block-container {
	position: relative;
}

.heart-slideshow-block-container .overlay-container {
	position: absolute;
	top: auto;
	bottom: 1em;
	right: 0;
	left: 0;
	z-index: 100;
	text-align: center;
}

.heart-slideshow-block-container .overlay-container p a {
	text-transform: uppercase;
	font-size: 1.6em;
	letter-spacing: 2.5px;
	color: #fff;
}

.heart-slideshow-block-container .complex-slideshow .heart-slide {
	background-color: #fff;
	margin: auto;
	/* max-width: 130vh;
	max-width: calc(var(--vh, 1vh) * 100); */
}
@media screen and (min-width: 43.75em) {
	.heart-slideshow-block-container .complex-slideshow .heart-slide {
		display: flex;
	}
}
.heart-slideshow-block-container .complex-slideshow .image-container {
	position: relative;
	margin: 0 auto;
	width: 100%;
}
@media screen and (min-width: 82em) {
	.heart-slideshow-block-container .complex-slideshow .image-container {
		height: 100%;
	}
}

.heart-slideshow-block-container .complex-slideshow .heart-slide.has-multiple-imgs figure {
	position: relative;
}

.heart-slideshow-block-container .complex-slideshow .heart-slide.has-multiple-imgs .image-holder {
	background: #000;
}

.heart-slideshow-block-container .complex-slideshow .heart-slide.has-multiple-imgs .image-holder img {
	opacity: 0;
}

@keyframes staggerFadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.heart-slideshow-block-container .complex-slideshow .heart-slide.has-multiple-imgs.active .image-holder:first-child img {
	animation: staggerFadeIn 1.5s ease-in 1.2s 1 forwards running;
}

.heart-slideshow-block-container .complex-slideshow .heart-slide.has-multiple-imgs.active .image-holder:nth-child(2) img {
	animation: staggerFadeIn 1.5s ease-in 1.7s 1 forwards running;
}

.heart-slideshow-block-container .complex-slideshow .heart-slide.has-multiple-imgs.active .image-holder:last-child img {
	animation: staggerFadeIn 1.5s ease-in 2.2s 1 forwards running;
}

@media screen and (min-width: 43.75em) {
	.heart-slideshow-block-container .complex-slideshow .image-container {
		display: flex;
		justify-content: space-between;
		/* justify-content: center; */
		/* max-width: calc((100vh - 18.5rem) * var(--slide-ratio));
		max-width: calc((100vh - 18.5rem) * var(--slide-ratio) + calc(1.4vh * var(--image-count, 0))); */
	}
	.heart-slideshow-block-container .complex-slideshow .heart-slide.has-multiple-imgs {
		display: flex;
		justify-content: center;
		align-items: center;
		--image-margin-right: 0.75rem;
	}
	.heart-slideshow-block-container .complex-slideshow .heart-slide.has-multiple-imgs figure {
		flex: 1 1 0%;
	}
}
.heart-slideshow-block-container .complex-slideshow .heart-slide .ratio {
	display: flex;
	align-items: center;
	height: 100%;
}

/* Inset Slideshow styles */

.dyad-slideshow.heart-slideshow.inset-slideshow {
	padding-top: 69%;
	position: relative;
	height: 0;
	min-height: 0;
}

.heart-slideshow.inset-slideshow .heart-slide .image-holder img[src] {
	object-fit: contain;
	font-family: "object-fit: contain;";
}

.heart-slideshow.inset-slideshow .image-holder {
	box-sizing: border-box;
	background: #fff;
}
/* cursor settings */
.heart-slideshow button {
	-webkit-tap-highlight-color: transparent;
}
#editor .heart-slideshow button {
	min-width: 50%;
	height: 40%;
	margin: auto;
}
.heart-slideshow button::before {
	display: none !important;
}
.heart-slideshow button.heart-prev {
	cursor: url("cursors/white/arrow-left.png") 2 8, pointer;
	cursor: url("cursors/white/arrow-left.svg") 2 8, pointer;
	cursor: -webkit-image-set(url("cursors/white/arrow-left.png") 1x, url("cursors/white/arrow-left@2x.png") 2x) 2 8, pointer;
}
.heart-slideshow button.heart-next {
	cursor: url("cursors/white/arrow-right.png") 7 8, pointer;
	cursor: url("cursors/white/arrow-right.svg") 7 8, pointer;
	cursor: -webkit-image-set(url("cursors/white/arrow-right.png") 1x, url("cursors/white/arrow-right@2x.png") 2x) 7 8, pointer;
}
#editor .heart-slideshow button.heart-prev {
	cursor: url("cursors/black/arrow-left.png") 2 8, pointer;
	cursor: url("cursors/black/arrow-left.svg") 2 8, pointer;
	cursor: -webkit-image-set(url("cursors/black/arrow-left.png") 1x, url("cursors/black/arrow-left@2x.png") 2x) 2 8, pointer;
}
#editor .heart-slideshow button.heart-next {
	cursor: url("cursors/black/arrow-right.png") 7 8, pointer;
	cursor: url("cursors/black/arrow-right.svg") 7 8, pointer;
	cursor: -webkit-image-set(url("cursors/black/arrow-right.png") 1x, url("cursors/black/arrow-right@2x.png") 2x) 7 8, pointer;
}

.heart-slideshow .scroll-indicator {
	z-index: 99;
}

.heart-slideshow.has-scroll-indicator .heart-slide figure::after {
	content: "";
	background: linear-gradient(
		to top,
		hsl(0, 0%, 0%) 0%,
		hsla(0, 0%, 0%, 0.987) 8.1%,
		hsla(0, 0%, 0%, 0.951) 15.5%,
		hsla(0, 0%, 0%, 0.896) 22.5%,
		hsla(0, 0%, 0%, 0.825) 29%,
		hsla(0, 0%, 0%, 0.741) 35.3%,
		hsla(0, 0%, 0%, 0.648) 41.2%,
		hsla(0, 0%, 0%, 0.55) 47.1%,
		hsla(0, 0%, 0%, 0.45) 52.9%,
		hsla(0, 0%, 0%, 0.352) 58.8%,
		hsla(0, 0%, 0%, 0.259) 64.7%,
		hsla(0, 0%, 0%, 0.175) 71%,
		hsla(0, 0%, 0%, 0.104) 77.5%,
		hsla(0, 0%, 0%, 0.049) 84.5%,
		hsla(0, 0%, 0%, 0.013) 91.9%,
		hsla(0, 0%, 0%, 0) 100%
	);
	opacity: 0.4;
	z-index: 200;
	height: 20em;
	display: block;
	position: absolute;
	top: auto;
	bottom: 0;
	width: 100%;
}

/*------ CMS SPECIFIC STUFF -----*/
/* dyad-slideshow.css — Wordpress Specific */
#editor .heart-slideshow {
	opacity: 1;
	visibility: visible;
	max-height: 0;
	padding-top: 66.5%;
}

#editor .wp-block .acf-block-body.wp-block-acf-dyad-slideshow {
	/* height: auto; */
	min-height: 0;
	height: 100%;
	width: 100%;
}
#editor .dyad-slideshow.heart-slideshow {
	height: 0;
	min-height: 0;
}

/* Favorites page */
#editor .text-over-image.wp-block-group {
	position: relative;
	width: 100%;
	padding-top: 66.5%;
	/* position: fixed; */
	/* top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	max-width: 100%;
	height: 100vh;
	min-height: 100lvh; */
}
.text-over-image.wp-block-group .wp-block-group__inner-container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	-webkit-flex-align: center;
	align-items: center;
}
.text-over-image .wp-block-image {
	position: absolute;
	z-index: 400;
	width: 70%;
	max-width: 80vh;
	height: auto;
	margin: auto;
	pointer-events: none;
	animation: fadeOut 2s 3s forwards cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
@keyframes fadeOut {
	to {
		opacity: 0;
	}
}
.text-over-image .heart-slideshow-block-container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 300;
	width: 100%;
	height: 100%;
	margin: 0;
}
.text-over-image .heart-slideshow-block-container .heart-slideshow button {
	bottom: calc(4em + 4vh);
}

.heart-slideshow figcaption {
	display: block;
	position: absolute;
	color: #fff;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.7em;
	font-size: clamp(0.6em, 1.7vh, 0.75em);
	top: auto;
	right: 0;
	bottom: 0;
	padding-bottom: 3vh;
	left: 0;
	text-align: center;
	z-index: 430;
	visibility: visible;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}
.heart-slideshow figcaption h3 {
	font-size: 2em;
	margin-bottom: 0;
}
.heart-slideshow figcaption span {
	opacity: 0.7;
}
.heart-slideshow figcaption::before {
	content: "";
	display: block;
	position: absolute;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	height: 25em;
	z-index: -1;
	background: linear-gradient(
		to top,
		hsl(0, 0%, 0%) 0%,
		hsla(0, 0%, 0%, 0.987) 8.1%,
		hsla(0, 0%, 0%, 0.951) 15.5%,
		hsla(0, 0%, 0%, 0.896) 22.5%,
		hsla(0, 0%, 0%, 0.825) 29%,
		hsla(0, 0%, 0%, 0.741) 35.3%,
		hsla(0, 0%, 0%, 0.648) 41.2%,
		hsla(0, 0%, 0%, 0.55) 47.1%,
		hsla(0, 0%, 0%, 0.45) 52.9%,
		hsla(0, 0%, 0%, 0.352) 58.8%,
		hsla(0, 0%, 0%, 0.259) 64.7%,
		hsla(0, 0%, 0%, 0.175) 71%,
		hsla(0, 0%, 0%, 0.104) 77.5%,
		hsla(0, 0%, 0%, 0.049) 84.5%,
		hsla(0, 0%, 0%, 0.013) 91.9%,
		hsla(0, 0%, 0%, 0) 100%
	);
	opacity: 0.2;
}