.card-page,
.card-post,
.card-timeline {
	@apply relative mx-auto w-auto md:flex md:items-end md:justify-start md:gap-12;

	@media (min-width: theme("screens.xl")) {
		@apply justify-center gap-24;
	}
	> .wrapper {
		@apply relative md:flex md:flex-wrap md:items-end md:justify-start md:gap-12;
		@media (min-width: theme("screens.xl")) {
			@apply justify-center gap-24;
		}
	}
	.card-img {
		@apply mb-5 md:mb-0;
		max-width: 210px;
		width: 100%;
		position: relative;

		@screen md {
			flex-basis: calc(50% - 1.5rem);
			max-width: none;
		}
		@screen xl {
			flex-basis: 470px;
			max-width: 470px;
		}
		img {
			object-fit: contain;
			position: relative;
			transition: transform 0.9s ease-in-out, clip-path 1s ease;
		}
		.img_container {
			overflow: hidden;
		}
	}
	.card-body {
		@screen md {
			flex-basis: calc(50% - 1.5rem);
		}

		@screen xl {
			flex-basis: 450px;
			max-width: 450px;
		}
	}
}
.card-timeline {
	display: flex;
	flex-direction: column !important;
	justify-content: space-between !important;
	align-items: flex-start;
	gap: 0;
	@screen md {
		flex-direction: row !important;
		gap: 4rem;
	}

	.left {
		flex-grow: 1;
	}
	.right {
		max-width: 500px !important;
	}
	.card-text {
	}
}

.card-page,
.card-timeline {
	.card-title-container {
		&:before {
			background-color: theme("colors.orange");
		}
		.card-uptitle {
			color: theme("colors.orange");
		}
	}

	.card-uptitle {
		@apply text-red mb-1 font-medium;
	}
	.card-title {
		@apply mb-6 font-serif text-base;
		@media (min-width: theme("screens.lg")) {
			@apply text-xl;
		}
		@media (min-width: theme("screens.xl")) {
			@apply text-2xl;
		}
		@media (min-width: theme("screens.2xl")) {
			@apply mb-6  text-3xl;
		}
	}
	.card-text {
		@apply text-green mb-6 max-w-[210px] font-medium md:max-w-[380px];
		&:last-child {
			@screen md {
				@apply mb-0;
			}
		}
	}

	.card-list {
		li {
			@apply text-green relative pb-8 pl-4 text-sm  md:text-lg;

			&:after {
				width: 9px;
				height: 9px;
				position: absolute;
				top: 8px;
				left: 0;
				content: "";
				border-radius: 100%;
				background-color: theme("colors.blue.400");
			}
			&:before {
				content: "";
				position: absolute;
				width: 1px;
				height: calc(100% + 8px);
				background-color: theme("colors.blue.400");
				top: 8px;
				left: 4px;
			}

			&.green {
				&:after {
					background-color: theme("colors.green");
				}
			}
			&.orange {
				&:after {
					background-color: theme("colors.orange");
				}
			}
			&:last-child {
				&::before {
					display: none;
				}
			}
		}
	}
	&:nth-child(odd) {
		@screen md {
			flex-direction: row;
		}
	}
	&:nth-child(even) {
		@screen md {
			flex-direction: row-reverse;
		}
	}
}

.card-page {
	@apply md:flex-wrap;
}

.card-team {
	@apply relative text-center;

	.card-img {
		@apply relative mb-6;
		&:before {
			content: "";
			position: absolute;
			width: 100%;
			padding-top: 40%;
			bottom: 0px;
			background-color: theme("colors.green");
			opacity: 0.1;
			left: 0;
			z-index: 0;
		}
		img {
			position: relative;
			z-index: 1;
			@apply mx-auto;
			max-width: 215px;

			@screen md {
				max-width: 200px;
			}
			@screen lg {
				max-width: 215px;
			}
		}
	}
	.card-title {
		@apply text-green mb-6 pb-1 text-lg font-medium;
	}
	.card-subtitle {
		@apply text-green text-lg;
	}
}

.card-post {
	&:nth-child(odd) {
		flex-direction: row;
		.card-body {
			justify-content: flex-end;
		}
	}
	&:nth-child(even) {
		.card-body {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			text-align: right;
		}
	}

	.card-uptitle {
		@apply text-red mb-1 font-normal;
	}
	.card-title {
		@apply mb-6 font-serif text-base;
		@media (min-width: theme("screens.lg")) {
			@apply mb-6  text-2xl;
		}
	}
	.card-text {
		@apply text-green mb-6 max-w-[380px];
	}
	&.card-has-bg {
		align-items: center;
	}
	.card-img {
		svg {
			position: absolute;
			opacity: 0;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			transition: opacity 0.9s ease-in-out;
			width: 40px;
			height: 40px;
			path {
				fill: theme("colors.white");
			}
		}
	}

	&:hover {
		.card-img {
			img {
				transform: scale(1.05);
			}
			svg {
				opacity: 1;
			}
		}
	}

	&.orange {
		&.bl,
		&.tl,
		&.br,
		&.tr {
			.card-img::after,
			.card-img::before {
				background-color: theme("colors.orange");
			}
		}
	}
	&.blue {
		&.bl,
		&.tl,
		&.br,
		&.tr {
			.card-img::after,
			.card-img::before {
				background-color: theme("colors.blue.400");
			}
		}
	}
	&.bl,
	&.tl,
	&.br,
	&.tr {
		.card-img::before,
		.card-img::after {
			content: "";
			position: absolute;
			background-color: theme("colors.blue.400");
			width: 7px;
			height: 7px;
		}
		.card-img::before {
			height: 50%;
		}
		.card-img::after {
			width: 50%;
		}
	}
	&.bl {
		.card-img::before {
			border-top-left-radius: 7px;
			bottom: 0;
			left: 0;
			transform: translateX(-100%);
		}
		.card-img:after {
			bottom: 0;
			left: 0;
			transform: translate(-7px, 100%);
		}
	}
	&.tr {
		.card-img::before {
			top: 0;
			right: 0;
			transform: translateX(100%);
		}
		.card-img:after {
			border-top-left-radius: 7px;
			top: 0;
			right: 0;
			transform: translate(7px, -100%);
		}
	}

	&.br {
		.card-img::before {
			border-top-right-radius: 7px;
			bottom: 0;
			right: 0;
			transform: translateX(100%);
		}
		.card-img:after {
			bottom: 0;
			right: 0;
			transform: translate(7px, 100%);
		}
	}
	&.tl {
		.card-img::before {
			top: 0;
			left: 0;
			transform: translateX(-100%);
		}
		.card-img:after {
			border-top-right-radius: 7px;
			top: 0;
			left: 0;
			transform: translate(-7px, -100%);
		}
	}

	&.h-sm {
		.card-img::after {
			width: 35%;
		}
	}
	&.h-md {
		.card-img::after {
			width: 50%;
		}
	}
	&.h-lg {
		.card-img::after {
			width: 65%;
		}
	}
	&.v-sm {
		.card-img::before {
			height: 35%;
		}
	}
	&.v-md {
		.card-img::before {
			height: 50%;
		}
	}
	&.v-lg {
		.card-img::before {
			height: 65%;
		}
	}
}

.card-img_txt {
	/*	 display: flex;*/

	.card-img {
		@media (min-width: theme("screens.lg")) {
			flex-basis: 570px;
			max-width: 570px;
		}
	}
	.card-body {
		@media (min-width: theme("screens.lg")) {
			flex-basis: 280px;
			max-width: 280px;
		}
	}
	p {
		@apply text-green mb-4 font-medium;
		strong {
			@apply text-red font-medium uppercase;
		}
	}
}

.card-img-text-list {
	@apply flex flex-col;
	.card-img_txt:nth-child(even) {
		flex-flow: row-reverse;
		.card-body {
			display: flex;
			justify-content: flex-end;
		}
	}
}

.card-page,
.card-post {
	&:not(.card-has-bg) {
		.card-banner {
			display: none;
		}
	}
}
.card-post {
	.card-img {
		max-width: none;
	}
}
.card-has-bg {
	.card-img {
		position: relative;

		.card-banner {
			z-index: 0;
			position: absolute;
			content: "";
			top: 0;
			width: 100vw;
			max-height: 75%;
			height: 1000px;
			background-color: theme("colors.yellow");
		}
	}

	&:nth-child(even) {
		.card-img .card-banner {
			left: 0;
			transform: translateX(0px);
		}
	}
	&:nth-child(odd) {
		.card-img .card-banner {
			right: 0;
			transform: translateX(60px);
		}
	}
	&.green {
		.card-img .card-banner {
			background-color: theme("colors.green");
		}
	}
}

.pages-list {
	max-width: 100%;
	/*	padding: 0 15px;
	@screen md {
		padding: 0 15px;
	}*/
	&.reverse {
		.card-page {
			&:nth-child(odd) {
				flex-direction: row-reverse;
			}
			&:nth-child(even) {
				flex-direction: row;
			}

			&.card-has-bg {
				&:nth-child(odd) {
					flex-direction: row-reverse;
					.card-img .card-banner {
						right: auto;
						left: 0;
						transform: scaleX(0);
						/*	transform: translateX(0px);*/
					}
				}
				&:nth-child(even) {
					flex-direction: row;
					.card-img .card-banner {
						right: 0;
						left: auto;
						transform: scaleX(0);
						/*	transform: translateX(-100%);*/
					}
				}
			}
		}
	}
}

.posts-list {
	padding: 10px 0;
	overflow: hidden;
	max-width: 100%;
	.card-post {
		&:nth-child(odd) {
			flex-direction: row;
		}
		&:nth-child(even) {
			flex-direction: row-reverse;
		}
	}
}
