/* Wrapper takes the place of "body" from the original CodePen demo.
   It's scoped to the block instead of taking over the whole page. */
   
.image-track-block {
	position: relative;
	width: 100%;
	height: 80vh; /* adjust to taste, or override per-theme */
	/*overflow: hidden;*/
	background: linear-gradient(60deg, rgb(1, 1, 1), rgb(10, 10, 10));
}
.square-slider .image-track-block {
    height: 50vh;
}


.image-track-block #image_track {
	display: flex;
	gap: 2vmin;
	position: absolute;
	left: 0%;
	top: 50%;
	padding-bottom: 10%;
	transform: translate(0%, -50%);
	user-select: none;
}
@media screen and (min-width: 1600px) {
    .image-track-block #image_track {
        left: 12%;
    }
}

.image-track-block #image_track > .image-track-slide {
	width: 65vmin;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
}

.image-track-block .image-track-slide-media {
	position: relative;
	width: 100%;
	height: 65vmin;
}
.square-slider .image-track-block .image-track-slide-media {
    height: 50vmin;
}

.image-track-block #image_track .image-track-slide-media > .image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 100% center;
	-webkit-filter: brightness(0.75);
	-o-filter: brightness(0.75);
	-moz-filter: brightness(0.75);
	-ms-filter: brightness(0.75);
	filter: brightness(0.75);
	border-radius: 10px;
	display: block;
}

/* Caption: shared base rules. Specific colors/sizes/spacing come from
   inline styles generated in render.php (childtheme_build_caption_style_css). */
.image-track-block .image-track-caption {
	box-sizing: border-box;
	word-wrap: break-word;
	user-select: none;
	pointer-events: none;
}

/* Overlay captions sit on top of the image itself. */
.image-track-block .image-track-caption--overlay {
	position: absolute;
	z-index: 5;
}

.image-track-block .image-track-caption--top-left {
	top: 16px;
	left: 16px;
}

.image-track-block .image-track-caption--top-center {
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
}

.image-track-block .image-track-caption--top-right {
	top: 16px;
	right: 16px;
}

.image-track-block .image-track-caption--center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.image-track-block .image-track-caption--bottom-left {
	bottom: 16px;
	left: 16px;
}

.image-track-block .image-track-caption--bottom-center {
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
}

.image-track-block .image-track-caption--bottom-right {
	bottom: 16px;
	right: 16px;
}

/* Below-image caption sits underneath, as a normal block element. */
.image-track-block .image-track-caption--below {
	position: relative;
	margin-top: 10px;
	width: 100%;
}

/* Arrow buttons */
.image-track-block .arrow-left,
.image-track-block .arrow-right {
	position: absolute;
	top: 90%;
	transform: translateY(-50%);
	z-index: 10;
	background: none;
	/*background: rgba(255, 255, 255, 0.15);*/
	color: #fff;
	border: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.image-track-block .arrow-left:hover,
.image-track-block .arrow-right:hover {
	background-color: rgba(255, 255, 255, 0.3);
}

.image-track-block .arrow-left {
	left: 47%;
}

.image-track-block .arrow-right {
	right: 47%;
}