.cards-slider {
	.swiper:not(.show) {
		opacity: 0;
	}
	
	.swiper-slide {
		height: auto;
	}

	.card_box {
		--br: 24px;

		height: 100%;
		display: flex;
		flex-direction: column;
		border-radius: var(--br) var(--br) 0 var(--br);
		overflow: hidden;
	}

	.img_box {
		position: relative;
		padding-top: 86.75%;
		overflow: hidden;

		img {
			display: block;
			object-fit: cover;
			object-position: bottom;
		}

		.tag {
			position: absolute;
			top: 10px;
			left: 10px;
			padding: 3px 12px;
			font-size: 14px;
			border-radius: 8px;
			z-index: 1;
			background-color: var(--brown-100);
		}
	}

	.text_box {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 16px;
		padding: 16px;
		background-color: var(--brown-100);
	}


	.swiper-slide:nth-child(even) .card_box {
		border-radius: var(--br) 0 var(--br) var(--br);

		.img_box {
			img {
				object-position: center;
			}

			.tag {
				top: auto;
				bottom: 10px;
				background-color: var(--green-50);
			}
		}

		.text_box {
			order: 1;
			background-color: var(--green-50);
		}

		.icon-button-box {
			bottom: auto;
			top: 0;
			padding-top: 0;
			padding-bottom: var(--p);
			border-radius: 0 0 0 var(--r);

			&:before {
				right: 0;
				bottom: auto;
				top: 100%;
				border-top-right-radius: var(--r);
				box-shadow: var(--p) calc(var(--p) * -1) 0 0 var(--white-50);
			}

			&:after {
				bottom: auto;
				top: 0;
				border-top-right-radius: var(--r);
				box-shadow: var(--p) calc(var(--p) * -1) 0 0 var(--white-50);
			}
		}
	}

	@media(max-width: 1199px) {
		.card_box {
			--br: 12px;
		}

		.text_box {
			padding: 12px 8px;
			gap: 8px;
		}
	}

	@media(max-width: 767px) {
		.img_box {
			padding-top: 127%;
		}
	}
}