body {
	background-color: var(--c2);

	.content {

		>div:first-child {
			display: flex;
			gap: clamp(10px, 3vw, 40px);

			>div {
				padding-top: 50px;

				>.header-title {
					text-align: center;
				}

				/* Header Label Kuning */
				strong {
					background-color: #ffcc00;
					padding: 10px 60px;
					border-radius: 50px;
					margin-bottom: 30px;
					width: fit-content;
					display: inline-block;
				}

				.header-sertifikasi strong {
					font-size: 24px;
					color: #1b4d2e;
					letter-spacing: 2px;
				}

				/* Grid Layout untuk List */
				.list {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 10px;
					max-width: 800px;
					width: 100%;
				}

				.card {
					display: grid;
					grid-template-rows: auto 1fr;
					background-color: #fff9d7;
					border-radius: 6px;
					overflow: hidden;
					padding: 10px 12px;
					box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
					justify-content: center;
				}

				.card-img {
					width: 100%;
					aspect-ratio: 16 / 9;
					background-color: #000;
					border-radius: 8px;
					margin-bottom: 10px;
				}

				.card-img img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					border-radius: 8px;
				}

				.card-content {
					display: grid;
					grid-template-rows: 1fr auto auto;
					color: #1b4d2e;

					span[class|="icon"] {
						color: #c61918;
						width: 11px;
						text-align: center;
					}
				}

				.card-content .title {
					font-weight: bold;
					font-size: 14px;
					margin-bottom: 5px;
				}

				.card-content .info {
					display: flex;
					align-items: center;
					font-size: 12px;
					gap: 8px;
				}

				.card-content .info svg,
				.card-content .info i {
					color: #d32f2f;
					width: 14px;
				}

				@media (max-width: 400px) {
					.list {
						grid-template-columns: 1fr;
					}
				}
			}

			@media (max-width: 600px) {
				flex-direction: column;
			}
		}

		>a {
			display: block;
			margin: auto;
			position: relative;
			inset: auto 0;
			width: fit-content;
			margin-top: 60px;
			background-color: #ffcc00;
			color: #1b4d2e;
			padding: 10px 20px;
			border-radius: 50px;
			font-weight: bold;
			transition: background-color 0.3s ease;

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