.ws-card-carousel {
	--corner-radius: 0;
	--bg-color: white;
	--border-color: #ccc;
	--border-width: 1px;
	--txt-color: #000;
	--txt-color-hover: var(--txt-color);
	container-type: inline-size;
	position: relative;
	overflow: hidden;
	margin-bottom: 1em;

	> div:first-child { /* Card track */
		display: flex;
		gap: 20px;
		overflow-x: scroll;
		scroll-behavior: smooth;
		-ms-overflow-style: none;
		scrollbar-width: none;
		scroll-snap-type: x mandatory;

		&::-webkit-scrollbar {
			display: none;
		}

		/* One card */
		@container (width <= 450px) {
			padding: 0 20px;
			margin: 0 -20px;
			width: calc(100% + 40px);
		}

		/* One card + partial */
		@container (width > 450px) and (width <= 550px) {
			width: calc(100% + 80px);
			padding-right: 80px;
			margin-right: -80px;
		}

		/* Two cards + partial */
		@container (width > 550px) and (width <= 1020px) {
			width: calc(100% + 80px);
			padding-right: 80px;
			margin-right: -80px;
		}

		/* Three cards + partial */
		@container (width > 1020px) and (width <= 1490px) {
			width: calc(100% + 80px);
			padding-right: 80px;
			margin-right: -80px;
		}

		/* Four cards + partial */
		@container (width > 1490px) and (width <= 1960px) {
			width: calc(100% + 80px);
			padding-right: 80px;
			margin-right: -80px;
		}

		/* Five cards + partial */
		@container (width > 1960px) {
			width: calc(100% + 80px);
			padding-right: 80px;
			margin-right: -80px;
		}

		a { /* Each card */
			text-decoration: none;
			color: inherit;
			border-radius: var(--corner-radius);
			overflow: hidden;
			background-color: var(--bg-color);
			border: 1px solid var(--border-color);

			/* One card */
			@container (width <= 450px) {
				flex: 0 0 min(100%, 450px);
				scroll-snap-align: center;
			}

			/* One card + partial */
			@container (width > 450px) and (width <= 550px) {
				flex: 0 0 min(calc(100% - 80px), 450px);
				scroll-snap-align: start;
			}

			/* Two cards + partial */
			@container (width > 550px) and (width <= 1020px) {
				flex: 0 0 min(calc((100% - 20px - 80px) / 2), 450px);
				scroll-snap-align: start;
			}

			/* Three cards + partial */
			@container (width > 1020px) and (width <= 1490px) {
				flex: 0 0 min(calc((100% - 40px - 80px) / 3), 450px);
				scroll-snap-align: start;
			}

			/* Four cards + partial */
			@container (width > 1490px) and (width <= 1960px) {
				flex: 0 0 min(calc((100% - 60px - 80px) / 4), 450px);
				scroll-snap-align: start;
			}

			/* Five cards + partial */
			@container (width > 1960px) {
				flex: 0 0 min(calc((100% - 80px - 80px) / 5), 450px);
				scroll-snap-align: start;
			}

			img {
				width: 100%;
				height: 200px;
				object-fit: cover;
				border-bottom: 4px solid var(--ieng-orange);
			}

			> div { /* Card text content */
				color: var(--txt-color);
				padding: 1em;
				> :last-child {
					margin-bottom: 0;
				}
			}

			&:is(a:hover, a:focus) {
				> div {
					color: var(--txt-color-hover);
					h3 {
						text-decoration: underline;
						text-decoration-color: color-mix(in srgb, currentcolor 50%, transparent);
					}
				}
			}
		}
	}

	> nav { /* Navigation buttons */
		display: flex;
		justify-content: flex-end;
		gap: 10px;
		margin-top: 20px;
		padding-right: 20px;

		button {
			padding: 8px 16px;
			border: none;
			border-radius: 4px;
			background: var(--ieng-blue);
			color: white;
			cursor: pointer;

			&:hover {
				background: color-mix(in srgb, var(--ieng-blue) 70%, dodgerblue);
			}

			&:disabled {
				background: #ccc;
				cursor: not-allowed;
			}
		}
	}
}