.docs-header {
	background-image: url('../../images/news-bg.webp');
	background-size: cover;
	background-position: center bottom;
	padding-top: calc(var(--space-xxl));
	padding-bottom: var(--space-lg);
	margin-bottom: var(--space-xxl);

	.container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		@media (max-width: 768px) {
			flex-direction: column;
		}

		h3 {
			color: var(--smx-color-white);
			margin: 0;
			display: flex;
			align-items: center;
		}

		.search-box {
			position: relative;
			input {
				min-width: 360px;
				background: var(--smx-color-white);
				border: 1px solid var(--smx-color-primary);
				border-radius: var(--border-radius-full);
				font-size: var(--font-text);
				padding-right: 4rem;

				@media (max-width: 768px) {
					font-size: 1rem;
				}
			}

			button {
				width: 3rem;
				text-align: center;
				background-color: transparent;
				border: none;
				background-image: url('../../images/search.svg');
				background-position: center center;
				background-size: 33%;
				background-repeat: no-repeat;
				position: absolute;
				z-index: 1;
				right: 0;
				display: flex;
				align-items: center;
				top: 0;
				bottom: 0;
			}
		}
	}
}

.site-main {
	.container {
		max-width: 720px;
		figure {
			width: calc(100% + 4rem);
			transform: translateX(-2rem);
			margin: var(--space-md) 0;

			img {
				border-radius: var(--border-radius-xl);
				display: block;
				width: 50%;
				max-width: 128px;
				height: auto;
				transition: transform 0.2s ease-in;
				margin: 0 auto;

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

			figcaption {
				text-align: center;
				font-size: var(--font-text);
				margin: 0;
				padding: var(--space-md) 0;
			}
		}

		.post-header {
			.cat-chips {
				display: flex;
				gap: var(--space-lg);
				.chip {
					font-size: var(--font-size-base);
					color: var(--smx-color-text);
					text-decoration: none;
					text-transform: uppercase;
					font-weight: bold;
				}
			}

			h1 {
				font-size: var(--font-title-main);
				color: var(--smx-color-black);
				margin: var(--space-md) 0;
			}

			.excerpt {
				h2 {
					margin: var(--space-sm) 0;
					font-size: var(--font-subtitle);
					color: var(--smx-color-text-bold);
					margin-top: 0;
					line-height: 1.21;
				}
			}

			.datetime {
				font-size: var(--font-size-lg);
				color: var(--smx-color-text-bold);
			}
		}

		.content {
			color: var(--smx-color-text-bold);
			font-size: 17px;
			line-height: 1.4705882353;
			font-weight: 400;
			letter-spacing: -0.022em;
			font-family:
				'Open Sans', 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial',
				sans-serif;
			p {
				margin-bottom: 1.4211026316em;
			}
			a {
				text-decoration: none;
				color: var(--smx-color-primary-contrast);
			}
			
			.card-note{
				border-radius: var(--border-radius-lg);
				padding: var(--space-lg);
				background-color: var(--smx-color-white);
				margin-bottom: var(--space-md);
				
				h3{
					color: var(--smx-color-primary-contrast);
				}
			}
		}
	}
}