/* --- grid container -------------------------------------------------- */
.wcc-card-grid {
	container: card-grid / inline-size;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;

	@media (min-width: 800px) {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
	}

	@media (min-width: 1350px) {
		display: grid;
		grid-template-columns: repeat(var(--wcc-cols, 3), 1fr);
		grid-auto-rows: 1fr;
		gap: var(--wcc-gap, 32px);
	}
}

.wcc-card {
	width: 100%;

	@media (min-width: 800px) {
		width: calc(50% - var(--wcc-gap, 32px) / 2);
	}

	@media (min-width: 1350px) {
		width: 100%;
		height: 100%;
	}

	.wcc-card__container {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		overflow: hidden;
		padding: 32px;
		border-radius: 10px;
		cursor: pointer;
		background-color: #ededed;
		height: 100%;
		gap: 16px;
		transition: all 0.14s ease-in-out;

		@media (min-width: 380px) {
			display: grid;
			grid-template-columns: auto 1fr;
			grid-template-rows: auto minmax(0, 1fr);
			grid-gap: 16px;
		}

		@media (min-width: 800px) {
			height: 100%;
		}

		.wcc-card__img {
			order: 2;
			width: 100%;
			height: 100%;
			transition: all 0.24s ease-in-out;
			transition-delay: 0.2s;

			@media (min-width: 380px) {
				grid-area: 2 / 1 / 3 / 3;
				justify-self: flex-end;
				max-width: 300px;
				margin: 0 auto;
			}

			@media (min-width: 800px) {
				width: 100%;
				height: 100%;
				max-width: 200px;
			}

			@media (min-width: 1350px) {
				max-width: 12vw;
			}

			@media (min-width: 1920px) {
				max-width: 280px;
			}

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: contain;
				margin: 0;
			}
		}

		.wcc-card__title {
			order: 1;
			font-size: 26px;
			font-weight: 700;
			margin: 0;

			@container card-grid (width < 1160px) {
				font-size: 20px;
			}

			@media (min-width: 380px) {
				grid-area: 1 / 1 / 2 / 2;
				justify-self: flex-start;
				padding: 0;
				align-self: center;
			}
		}

		.wcc-card__btn {
			order: 3;
			display: inline-block;
			padding: 7px 20px;
			border-radius: 50px;
			background: transparent;
			border: 1px solid #232e34;
			color: #232e34;
			text-decoration: none;
			cursor: pointer;

			@media (min-width: 380px) {
				justify-self: flex-end;
				white-space: nowrap;
			}
		}
	}

	&:hover,
	&:focus {
		.wcc-card__container {
			background-color: #84c8ea;
		}

		.wcc-card__img {
			transform: scale(1.05);
		}

		.wcc-card__btn {
			background: #232e34;
			color: #fff;
		}
	}

	&.wcc-card--large {
		grid-row: span 2;
	}

	&.wcc-card--small {
		.wcc-card__container {
			@media (min-width: 380px) and (max-width: 799px), (min-width: 1350px) {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: 1fr auto;
				grid-gap: 16px;
				aspect-ratio: 20 / 9;

				.wcc-card__img {
					grid-area: 1 / 2 / 3 / 3;
					justify-self: flex-end;
				}

				.wcc-card__title {
					grid-area: 1 / 1 / 2 / 2;
					justify-self: flex-start;
					align-self: flex-start;
				}

				.wcc-card__btn {
					grid-area: 2 / 1 / 3 / 2;
					justify-self: flex-start;
				}
			}
		}
	}
}