.programs {
	#programs {
		padding:0;

		.list {
			justify-content:left;
		}
	}
}
#programs {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--50) 0;

	h2.title {
		margin-bottom: var(--43);
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--30);
		justify-content: center;
		padding: 0 var(--50);
		padding: 0;

		.program {
			flex: 0 0 calc((100% - var(--30)*3) / 4);
			border: 1px solid var(--Gray);
			border-radius: var(--20);
			padding: var(--30);
			display: flex;
			flex-direction: column;
			text-align: center;
			gap: var(--20);
			background: var(--White);
			transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
			position: relative;
			overflow: hidden;

			&:hover {
				transform: translateY(var(---10));
				box-shadow: 0 var(--15) var(--25) rgba(0, 0, 0, 0.15);
				border-width:5px;
				border-image: linear-gradient(to right, var(--Kaizen), var(--Gray)) 1;
				background: linear-gradient(to bottom, var(--White), var(--ULGrayP5));
				padding:var(--26);
			}

			&::before {
				content: '';
				position: absolute;
				top: -50%;
				left: -50%;
				width: 200%;
				height: 200%;
				background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2), transparent);
				opacity: 0;
				transform: scale(1);
				transition: opacity 0.5s ease, transform 0.5s ease;
				z-index: -1;
			}

			&:hover::before {
				opacity: 1;
				transform: scale(1.2);
			}

			.d {
				display: flex;
				flex-direction: column;
				gap: var(--5);
				margin-bottom: var(--20);

				.date {
					font-size: var(--32);
					font-weight: 700;
					line-height: 1.2;
					color: var(--Black);
				}

				.day {
					font-size: var(--18);
					color: var(--Gray);
				}
			}

			.title {
				font-size: var(--30);
				font-weight: 600;
				color: var(--Kaizen);
				margin-bottom: var(--10);
				transition: color 0.3s ease;
			}

			.time {
				font-size: var(--18);
				color: var(--Gray);
			}

			.description {
				font-size: var(--16);
				color: var(--Gray);
				line-height: 1.6;
				text-align: left;
				flex: 1;
				padding-top: var(--25);
				border-top: 1px solid var(--LGray);
				white-space:pre-wrap;
			}

			.actions {
				display: flex;
				flex-direction: column;
				gap: var(--15);
				align-items: center;

				.price {
					font-size: var(--24);
					font-weight: 600;
				}

				a {
					&:not(.btn) {
						font-size: var(--18);
						color: var(--Black);
						text-decoration: none;
						position: relative;
						overflow: hidden;

						&::after {
							content: '';
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							height:var(--2);
							background: var(--Black);
							transform: scaleX(0);
							transform-origin: left;
							transition: transform 0.3s ease;
						}

						&:hover::after {
							transform: scaleX(1);
						}
					}

					&.btn {
						--Black:var(--Kaizen);
					}
				}
			}
		}
	}
}