.content {
	@media screen and (max-width: 1200px) {
		padding: 0 20px;
	}

	&.training {
		margin-top: 50px;
		display: flex;
		gap: 20px;
		max-width: calc(var(--dw) + 200px);

		.content_container {
			width: calc(100% - 320px);
			padding: 0;

			@media screen and (max-width: 768px) {
				width: 100%;
			}
		}
	}

	.content_container {
		width: 100%;
		height: fit-content;
		padding-top: 50px;
		display: flex;
		flex-direction: column;
		gap: 30px;

		&.jadwal_training {
			font-family: "Oak Sans";

			h2 {
				text-align: center;
				font-weight: 800;
				font-size: 28px;
				line-height: 1;

				@media screen and (max-width: 768px) {
					font-size: 22px;
				}

				@media screen and (max-width: 480px) {
					font-size: 18px;
				}
			}
		}

		.content_item {
			font-family: "Poppins";
			width: 100%;
			height: fit-content;
			text-align: center;


			h1 {
				@media screen and (max-width: 1200px) {
					font-size: 25px;
				}

				span {
					color: #b41f1c;
				}
			}

			.hero_card {
				height: fit-content;
				width: 100%;
				background-color: #fff;
				display: flex;
				padding: 35px 30px;
				border-radius: 10px;
				box-shadow: var(---shadow);
				position: relative;
				align-items: stretch;
				text-align: left;

				@media screen and (max-width: 768px) {
					padding: 10px 15px;
				}

				.hero_title {
					height: 240px;
					width: calc(100% - 250px);

					@media screen and (max-width: 768px) {
						height: 190px;
						width: calc(100% - 170px);
					}

					@media screen and (max-width: 480px) {
						height: 150px;
						width: calc(100% - 120px);
					}

					.box_layer1 {
						position: relative;
						background: var(--gradient-green);
						color: #fff;
						padding: 10px 20px;
						height: 100%;
						font-size: 23px;
						border-radius: 13px;

						@media screen and (max-width: 1200px) {
							font-size: 18px;
						}

						@media screen and (max-width: 768px) {
							font-size: 14px;

							h2 {
								font-size: 19px;
							}
						}

						@media screen and (max-width: 480px) {
							h2 {
								font-size: 12px;
							}
						}

						.box_layer2 {
							position: absolute;
							width: 100%;
							height: calc(100% - 70px);
							bottom: 10px;
							left: -15px;
							padding: 15px;
							background: linear-gradient(to bottom, #f2f2f2, #fff);
							color: #000;
							border-radius: 10px;
							font-weight: 600;
							line-height: 1.2;

							@media screen and (max-width: 768px) {
								font-size: 13px;
							}

							@media screen and (max-width: 480px) {
								padding: 10px;
								font-size: 10px;
								height: calc(100% - 40px);
							}

							span {
								color: #0ea554
							}

							.box_footer {
								display: flex;
								align-items: center;
								justify-content: space-between;
								gap: 20px;

								@media screen and (max-width: 480px) {
									padding-top: 10px;
								}

								.box_line {
									background-color: #b41f1c;
									height: 2px;
									width: 100%;
								}

								a {
									display: block;
									width: fit-content;
									text-decoration: none;
									font-weight: 600;
									font-size: 18px;
									text-wrap: nowrap;
									background: var(--gradient-green);
									color: #fff;
									padding: 7px 30px;

									@media screen and (max-width: 768px) {
										font-size: 15px;
									}

									@media screen and (max-width: 480px) {
										font-size: 11px;
										padding: 5px 20px;
									}
								}
							}
						}
					}
				}

				.hero_image {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 230px;
					height: fit-content;

					@media screen and (max-width: 768px) {
						width: 180px;
					}

					@media screen and (max-width: 480px) {
						width: 120px;
					}

					img {
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
			}

			.jadwal_banner {
				height: fit-content;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 20px;
				flex-wrap: wrap;

				.banner_image {
					width: calc(calc(100% / 3) - 14px);
					cursor: pointer;
					transition: all 0.3s ease-in-out;

					&:hover {
						scale: 1.05;
					}

					@media screen and (max-width: 480px) {
						width: 100%;
					}
				}
			}
		}
	}

	aside {
		margin-top: 82px;

		&::after {
			content: none;
		}

		@media screen and (max-width: 768px) {
			display: none;
		}
	}
}

.imageViewer_container {
	position: fixed;
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(5px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;

	.imageViewer_close {
		position: absolute;
		cursor: pointer;
		width: 20px;
		height: 20px;
		top: 40px;
		right: 40px;

		div {
			width: 100%;
			height: 3px;
			background-color: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) rotate(45deg);

			&::after {
				content: "";
				width: 100%;
				height: 3px;
				background-color: #fff;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%) rotate(-90deg);
			}
		}
	}

	img {
		width: 50%;
		height: 50%;
		object-fit: contain;
		transition: all 0.3s ease-in-out;
		cursor: zoom-in;

		&.zoom {
			width: 95%;
			height: 95%;
			cursor: zoom-out;
		}
	}
}