/* ======================= -------- Block - Offset Carousel -------- ========================== */
/* General */
.block-offset-carousel .container-offset {
	width: calc(100% - 10rem);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

	.block-offset-carousel .container-offset .content-primary {
		width: 25%;
	}

	.block-offset-carousel .container-offset .content-secondary {
		width: calc(75% - 10rem);
	}



/* Offset Orientation */
.block-offset-carousel .container-offset.offset-left {
	margin-right: auto;
}

.block-offset-carousel .container-offset.offset-right {
	margin-left: auto;
}


/* Content Position */
.block-offset-carousel .offset-right .content-primary {
	order: 1;
}

.block-offset-carousel .offset-right .content-secondary {
	order: 2;
}

.block-offset-carousel .offset-left .content-primary {
	order: 2;
}

.block-offset-carousel .offset-left .content-secondary {
	order: 1;
}


@media (max-width: 1800px) {
	.block-offset-carousel .container-offset {
		width: calc(100% - 6rem);
	}
}

@media (max-width: 1300px) {
	.block-offset-carousel .container-offset {
		width: calc(100% - 3rem);
	}

		.block-offset-carousel .container-offset .content-primary {
			width: 340px;
		}
	
		.block-offset-carousel .container-offset .content-secondary {
			width: calc((100% - 340px) - 6rem);
		}
}

@media (max-width: 950px) {
	.block-offset-carousel .container-offset {
		margin-left: auto;
		margin-right: unset;
	}

		.block-offset-carousel .container-offset .content-primary {
			padding-top: unset;
			width: calc(100% - 3rem);
		}
	
		.block-offset-carousel .container-offset .content-secondary {
			width: 100%;
			margin-top: 6rem;
		}

		.block-offset-carousel .offset-left .content-primary {
			order: 1;
		}
		
		.block-offset-carousel .offset-left .content-secondary {
			order: 2;
		}
}

@media (max-width: 650px) {
	.block-offset-carousel .container-offset .content-primary {
		width: calc(100% - 1.5rem);
	}

	.block-offset-carousel .container-offset {
		width: calc(100% - 1.5rem);
	}
}



/* ======================= -------- Dedicated Sub - Blocks -------- ========================== */
/* ============= ---- Sub - Offset Carousel ---- ================ */
.sub-offset-carousel:after {
	content: '\d013';
	font-family: "RedfernArt";
	color: var(--white);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	background-color: var(--darkbrown);
	opacity: 0.8;
	position: absolute;
	top: calc((440px / 2) - (6rem / 2));
	z-index: 999;
	pointer-events: none;
}

.offset-left .sub-offset-carousel:after {
	left: 10rem;
	transform: rotate(180deg);
}

.offset-right .sub-offset-carousel:after {
	right: 10rem;
}

	.sub-offset-carousel .list-offset-carousel-item {
		width: auto;
		margin-right: 5rem;
	}
	
		.sub-offset-carousel .list-offset-carousel-item a {
			display: block;
			width: 100%;
			height: 17vw;
			min-height: 440px;
			max-height: 500px;
		}
	
			/* Image */
			.sub-offset-carousel .list-offset-carousel-item a picture {
				display: block;
				width: auto;
				height: 100%;
				overflow: hidden;
				border-radius: 0.3rem;
			}
	
				.sub-offset-carousel .list-offset-carousel-item a picture * {
					display: block;
					width: auto;
					height: 100%;
				}
	
			/* Art Credentials */
			.sub-offset-carousel .list-offset-carousel-item .art-credentials {
				box-sizing: border-box;
				width: 0;
				min-width: 100%;
				overflow-wrap: break-word;
				word-wrap: break-word;
			}

			.sub-offset-carousel .list-offset-carousel-item .art-credentials.art-credentials-left {
				text-align: left;
			}
	
			.sub-offset-carousel .list-offset-carousel-item .art-credentials.art-credentials-right {
				text-align: right;
			}
	
				.sub-offset-carousel .list-offset-carousel-item .art-credentials .art-title {
					display: block;
					font-family: 'Autography';
					font-weight: 400;
					font-size: clamp(2.6rem, 1.45vw, 3.6rem);
					/* font-size: 2.8rem; */
				}
	
				.sub-offset-carousel .list-offset-carousel-item .art-credentials .art-year {
					display: block;
					font-family: "latienne-pro", serif;
					font-weight: 400;
					font-size: clamp(1.1rem, 0.62vw, 1.6rem);
					/* font-size: 1.2rem; */
				}


@media (max-width: 1800px) {
	.offset-left .sub-offset-carousel:after {
		left: 6rem;
	}
	
	.offset-right .sub-offset-carousel:after {
		right: 6rem;
	}
}

@media (max-width: 1300px) {
	.sub-offset-carousel:after {
		top: calc((380px / 2) - (6rem / 2));
	}

	.offset-left .sub-offset-carousel:after {
		left: 3rem;
	}
	
	.offset-right .sub-offset-carousel:after {
		right: 3rem;
	}

		.sub-offset-carousel .list-offset-carousel-item {
			margin-right: 3rem;
		}

			.sub-offset-carousel .list-offset-carousel-item a {
				height: 380px;
				min-height: unset;
				max-height: unset;
			}
}

@media (max-width: 1100px) {
	.sub-offset-carousel:after {
		width: 5.4rem;
		height: 5.4rem;
		top: calc((320px / 2) - (5.4rem / 2));
	}

		.sub-offset-carousel .list-offset-carousel-item {
			margin-right: 2rem;
		}

			.sub-offset-carousel .list-offset-carousel-item a {
				height: 320px;
			}
}

@media (max-width: 950px) {
	.sub-offset-carousel .list-offset-carousel-item {
		margin-right: 3rem;
	}
}

@media (max-width: 650px) {
	.sub-offset-carousel:after {
		top: calc((260px / 2) - (5.4rem / 2));
	}

	.offset-left .sub-offset-carousel:after {
		left: 1.5rem;
	}
	
	.offset-right .sub-offset-carousel:after {
		right: 1.5rem;
	}

	.sub-offset-carousel .list-offset-carousel-item a {
		height: 260px;
	}
}

@media (max-width: 450px) {
	.sub-offset-carousel:after {
		top: calc((200px / 2) - (5.4rem / 2));
	}

	.sub-offset-carousel .list-offset-carousel-item a {
		height: 200px;
	}
}

@media (max-width: 380px) {
	.sub-offset-carousel:after {
		width: 5rem;
		height: 5rem;
		top: calc((180px / 2) - (5rem / 2));
	}

	.sub-offset-carousel .list-offset-carousel-item a {
		height: 180px;
	}
}