main {
	flex-direction: column;
}

.content {
	width: 100%;
	height: fit-content;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Poppins";
	position: relative;
	flex-direction: column;
	padding-bottom: 20px;

	&.search_container {
		.content_wrap {
			padding: 30px 0;
		}
	}

	&.sertifikasi {
		background-color: #fff9d3;

		.content_wrap {
			padding: 20px 0;
		}
	}

	&.non_sertifikasi {
		.content_wrap {
			padding: 20px 0;
		}
	}

	.content_bg {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
		overflow: hidden;

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

	.content_wrap {
		width: var(--maxContent);
		height: fit-content;

		@media screen and (max-width: 900px) {
			width: 100% !important;
			padding: 20px !important;
		}

		.search {
			width: 100%;
			height: fit-content;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;

			.search_box {
				height: 30px;
				width: 350px;
				background-color: #c3deff;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50px;

				input {
					width: 95%;
					border: none;
					outline: none;
					background-color: transparent;
					padding: 5px;
					font-family: "Poppins";

					&::placeholder {
						font-weight: 600;
						color: #fff;
					}
				}
			}

			button {
				height: 30px;
				border: none;
				outline: none;
				background-color: #003092;
				color: #fff;
				padding: 5px 20px;
				border-radius: 50px;
				cursor: pointer;
				font-weight: 600
			}
		}

		.content_title {
			width: fit-content;
			height: fit-content;
			padding: 20px 0;
			text-align: left;

			h1 {
				text-align: center;
				font-size: 28px;
				font-weight: 600;
				color: #003092;
				position: relative;
				padding-left: 20px;

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

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

				&::after {
					content: "";
					height: 60%;
					width: 20px;
					position: absolute;
					left: -20px;
					top: 50%;
					transform: translateY(-50%);
					background-color: #003092;

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

		.content_body {
			width: 100%;
			height: fit-content;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;
			gap: 20px;

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

			.content_item {
				width: 23%;
				min-width: 200px;
				min-height: fit-content;
				background-color: #003092;
				border-radius: 30px;
				overflow: hidden;

				@media screen and (max-width: 480px) {
					width: 100%;
					display: flex;
					align-items: center;
				}

				.content_image {
					height: 190px;
					width: 100%;
					position: relative;
					overflow: hidden;
					border-radius: 0 0 20px 20px;

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

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						overflow: hidden;
						transition: 0.3s ease-in-out;

						&:hover {
							transform: scale(1.1);
						}
					}
				}

				.content_detail {
					height: fit-content;
					width: 100%;
					padding: 10px 20px 20px;
					display: flex;
					flex-direction: column;
					gap: 10px;
					align-items: center;

					@media screen and (max-width: 480px) {
						height: 100%;
						justify-content: space-between;
						align-items: flex-start;
					}

					p {
						color: #fff;
						font-size: 14px;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;

						@media screen and (max-width: 480px) {
							font-size: 12px;
							-webkit-line-clamp: 3;
						}
					}

					a {
						text-decoration: none;
						background-color: #ffcf50;
						font-size: 14px;
						padding: 3px 10px;
						color: #000;
						border-radius: 50px;
						font-weight: 500;
						transition: 0.3s ease-in-out;

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

						&:hover {
							background-color: #ffbb00;
						}
					}
				}

				&.skeleton {
					background-color: #e2e2e2;
					border-radius: 4px;
					position: relative;
					overflow: hidden;
					border-radius: 30px;
					pointer-events: none;

					.content_image {
						position: relative;
						background-color: #cfcfcf;
						overflow: hidden;

						img {
							display: none;
						}

						&::after {
							content: "";
							height: 100%;
							width: 100%;
							position: absolute;
							top: 0;
							left: 0;
							background: linear-gradient(90deg, #cfcfcf 25%, #e0e0e0 50%, #cfcfcf 75%);
							animation: shimmer 1s infinite linear;
						}
					}

					.content_detail {
						p {
							width: fit-content;
							background-color: #cfcfcf;
							color: transparent;
							overflow: hidden;
							position: relative;

							&::after {
								content: "";
								height: 100%;
								width: 100%;
								position: absolute;
								top: 0;
								left: 0;
								background: linear-gradient(90deg, #cfcfcf 25%, #e0e0e0 50%, #cfcfcf 75%);
								animation: shimmer 1s infinite linear;
							}
						}

						a {
							background-color: #cfcfcf;
							color: transparent;
							overflow: hidden;
							position: relative;

							&::after {
								content: "";
								height: 100%;
								width: 100%;
								position: absolute;
								top: 0;
								left: 0;
								background: linear-gradient(90deg, #cfcfcf 25%, #e0e0e0 50%, #cfcfcf 75%);
								animation: shimmer 1s infinite linear;
							}
						}
					}
				}
			}
		}
	}

	.content_navigation {
		display: flex;
		justify-content: center;
		gap: 10px;
		color: #003092;

		.content_nav {
			height: 30px;
			width: 30px;
			display: flex;
			align-items: center;
			background-color: #fff;
			padding: 10px;
			justify-content: center;
			cursor: pointer;
			border-radius: 5px;
			transition: 0.3s ease-in-out;

			&.disabled {
				pointer-events: none;
				opacity: 0.5;
			}

			&:hover {
				background-color: #003092;
				color: #fff;
			}

			&.prev>span {
				transform: rotate(180deg);
			}
		}
	}
}

@keyframes shimmer {
	0% {
		left: -150px;
	}

	100% {
		left: 100%;
	}
}