.e5-accordion-wrapper {
	display: inline-flex;
	--e5-accordion-small-size: 160px;
	--e5-accordion-large-size: 460px;
	--e5-accordion-small-height: 430px;
	--e5-accordion-large-height: 430px;
	--e5-accordion-spacing: 20px;
	
	/* Gets overwritten by injected inline css */
	--e5-accordion-item-count: 1;
	
	min-width: calc(var(--e5-accordion-large-size) + (var(--e5-accordion-item-count) - 1) * (var(--e5-accordion-small-size) + var(--e5-accordion-spacing)));
	height: var(--e5-accordion-small-height);

	width: 100%;
	justify-content: flex-end;
}

.e5-accordion-wrapper input[type=radio] {
	display: none;
}

.e5-accordion-item-wrapper {
	display: block;
	overflow: hidden;
}

.e5-accordion-item-wrapper-spacer {
	margin-left: calc(var(--e5-accordion-spacing) / 2);
	margin-right: calc(var(--e5-accordion-spacing) / 2);
	height: 100%;
	position: relative;

	width: var(--e5-accordion-small-size);
	transition: width 0.25s;
}

.e5-accordion-item-wrapper:first-child .e5-accordion-item-wrapper-spacer {
	margin-left: 0;

	/* In preparation for mobile: */
	margin-top: 0;
}

.e5-accordion-item-wrapper:last-child .e5-accordion-item-wrapper-spacer {
	margin-right: 0;

	/* In preparation for mobile: */
	margin-bottom: 0;
}

.e5-accordion-item-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.e5-accordion-item-background,
.e5-accordion-item-background img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.75);
	object-position: left;
}

.e5-accordion-item-inner {
	color: #fff;

	display: flex;
	flex-direction: row;
	justify-content: space-between;
	
	height: 100%;
	padding: 1em;
	width: var(--e5-accordion-large-size);
}

.e5-accordion-item-title {
	writing-mode: vertical-rl;
	transform: rotate(180deg);

	font-weight: 600;
	font-size: 2.2em;
	text-transform: uppercase;
	line-height: 1;
}

.e5-accordion-item-text {
	z-index: 1;

	opacity: 0;
	transition: opacity 0.25s;

	padding-top: 1em;
	padding-left: 2em;
}

.e5-accordion-item-text a {
	color: var(--primary-color);
}

/* Animation */
@media (hover: hover) {
	.e5-accordion-wrapper:not(:hover) .e5-accordion-item-wrapper:first-of-type .e5-accordion-item-wrapper-spacer,
	.e5-accordion-wrapper:hover .e5-accordion-item-wrapper:hover .e5-accordion-item-wrapper-spacer {
		width: var(--e5-accordion-large-size);
	}

	.e5-accordion-wrapper:not(:hover) .e5-accordion-item-wrapper:first-of-type .e5-accordion-item-text,
	.e5-accordion-wrapper:hover .e5-accordion-item-wrapper:hover .e5-accordion-item-text {
		opacity: 1;
	}
}

@media (hover: none) {
	.e5-accordion-wrapper input[type="radio"]:checked + label .e5-accordion-item-wrapper-spacer {
		width: var(--e5-accordion-large-size);
	}

	.e5-accordion-wrapper input[type="radio"]:checked + label .e5-accordion-item-text {
		opacity: 1;
	}
}

/* Responsive */
@media screen and (max-width: 1200px) {
	.e5-accordion-text-col {
		flex-basis: 100%;
		max-width: 100%;
	}

	.e5-accordion-wrapper {
		flex-direction: column;
		align-items: center;

		--e5-accordion-small-height: 180px;
		height: unset;

		--e5-accordion-spacing: 10px;

		min-width: unset;
		width: 100%;

		--e5-accordion-small-size: 100%;
		--e5-accordion-large-size: 100%;
	}

	.e5-accordion-item-wrapper-spacer {
		margin-left: 0;
		margin-right: 0;
		margin-top: calc(var(--e5-accordion-spacing) / 2);
		margin-bottom: calc(var(--e5-accordion-spacing) / 2);

		height: var(--e5-accordion-small-height);
		transition: height 0.25s;

		max-width: 550px;
	}

	.e5-accordion-item-background,
	.e5-accordion-item-background img {
		object-position: top center;
	}

	.e5-accordion-item-title {
		writing-mode: horizontal-tb;
		transform: rotate(0deg);
		font-size: 1.5em;
	}

	.e5-accordion-item-inner {
		flex-direction: column;
		justify-content: flex-start;
		gap: 2em;
	}

	.e5-accordion-item-text {
		padding: 0;
	}

	@media (hover: hover) {
		.e5-accordion-wrapper:not(:hover) .e5-accordion-item-wrapper:first-of-type .e5-accordion-item-wrapper-spacer,
		.e5-accordion-wrapper:hover .e5-accordion-item-wrapper:hover .e5-accordion-item-wrapper-spacer {
			height: var(--e5-accordion-large-height);
		}
	}

	@media (hover: none) {
		.e5-accordion-wrapper input[type="radio"]:checked + label .e5-accordion-item-wrapper-spacer {
			height: var(--e5-accordion-large-height);
		}
	}
}

@media screen and (min-width: 1200px) and (max-width: 1500px) {
	.e5-accordion-wrapper {
		justify-content: center;
	}

	.e5-accordion-text-col {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* Accordion Column */
@media screen and (max-width: 1500px) {
	.e5-accordion-col {
		flex-basis: 100%;
		max-width: 100%;
	}
}