/* ========================================
CREATIVE SHOWCASE WRAPPER
======================================== */

.pxr-creative-showcase {
	width: 100%;
	position: relative;
}

/* ========================================
SLIDER WRAPPER
======================================== */

.pxr-slider {
	width: 100%;
	position: relative;

	margin-bottom: 28px;
}

/* ========================================
SPLIDE TRACK
======================================== */

.pxr-slider .splide__track {
	overflow: hidden;
}

/* ========================================
SPLIDE LIST
======================================== */

.pxr-slider .splide__list {
	align-items: center;
}

/* ========================================
SLIDE ITEM
======================================== */

.pxr-slide-item {
	flex-shrink: 0;
	list-style: none;
}

/* Remove anchor default styles */
.pxr-slide-item a {
	display: block;
	text-decoration: none;
}

/* ========================================
UNIFORM IMAGE CARD
======================================== */

.pxr-slide-image {
	width: 22rem;
	min-width: 320px;

	aspect-ratio: 16 / 9;

	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;

	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

	overflow: hidden;

	transform: translateZ(0);
}

/* ========================================
HIDDEN GALLERY LINKS
======================================== */

.pxr-hidden-gallery-item {
	display: none;
}

/* ========================================
SPLIDE CLEANUP
======================================== */

/* Remove default Splide arrows */
.pxr-slider .splide__arrows {
	display: none;
}

/* Remove default pagination */
.pxr-slider .splide__pagination {
	display: none;
}

/* ========================================
MOBILE
======================================== */

@media (max-width: 767px) {

	.pxr-slider {
		margin-bottom: 20px;
	}
}






/* ========================================
SHOWCASE ROW
======================================== */

.pxr-showcase-row {
	display: flex;
	align-items: center;

	position: relative;

	margin-bottom: 26px;
}

/* ========================================
VERTICAL SIDE BUTTON
======================================== */

.pxr-showcase-side-button {
	width: 56px;

	flex-shrink: 0;

	align-self: stretch;

	display: flex;
	align-items: center;
	justify-content: center;

	background: rgba(124, 165, 61, 0.12);

	border: 2px solid #719d41;
}

/* Rotated button */
.pxr-showcase-side-button a {
	font-family: Khand, Helvetica, Arial, Lucida, sans-serif;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	transform-origin: center;

	white-space: nowrap;

	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;

	color: #ffffff;

	padding: 10px 18px;

	border: 2px solid #719d41;

	background: #719d41;

	transition:
		background 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease;
}

/* Hover */
.pxr-showcase-side-button a:hover {
    background: #719d41;
    color: #ffffff;
}

/* ========================================
SIDE BUTTON LINK
======================================== */

.pxr-showcase-side-button a {
	width: 100%;
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: center;

	text-decoration: none;
}

/* ========================================
ROTATED LABEL
======================================== */

.pxr-showcase-side-button a span {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	transform: rotate(-90deg);

	white-space: nowrap;

	font-family: Khand, Helvetica, Arial, Lucida, sans-serif;

	font-size: 35px;
	font-weight: 700;

	letter-spacing: 2px;
	text-transform: uppercase;

	color: #ffffff;

	transition: opacity 0.25s ease;
}

/* ========================================
SLIDER
======================================== */

.pxr-showcase-row .pxr-slider {
	flex: 1;
	min-width: 0;
}

#splide02, #splide01 {
    margin-bottom: 0;
}

/* ========================================
MOBILE
======================================== */

@media (max-width: 767px) {

	.pxr-showcase-row {
		gap: 10px;
	}

	.pxr-showcase-side-button {
		width: 44px;
	}

	.pxr-showcase-side-button a {
		font-size: 10px;

		letter-spacing: 1px;

		padding: 8px 12px;
	}
}