.job-detail {
	padding: var(--space-l-2xl) 0;

	& > .layout {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-xl);
		align-items: start;

		& > article {
			flex: 2 1 26rem;
			display: flex;
			flex-direction: column;
			gap: var(--space-m);

			& > header > p {
				color: var(--color-neutral-4);
				margin-top: var(--space-3xs);
			}

			& > .description {
				display: flex;
				flex-direction: column;
				gap: var(--space-s);
			}
		}

		& > aside {
			flex: 1 1 16rem;
			display: flex;
			flex-direction: column;
			gap: var(--space-s);
			padding: var(--space-s);
			border: 1px solid var(--color-neutral-8);
			border-radius: var(--border-radius);

			& > dl {
				display: flex;
				flex-direction: column;
				gap: var(--space-xs);

				& > div {
					display: flex;
					justify-content: space-between;
					gap: var(--space-s);
					font-size: var(--font-size--1);

					& > dt {
						color: var(--color-neutral-4);
					}

					& > dd {
						margin: 0;
						font-weight: 500;
						text-align: right;
						overflow-wrap: anywhere;

						& > .badge {
							background: var(--color-color-9);
							color: var(--color-color-1);
							padding: var(--space-3xs) var(--space-xs);
							border-radius: 1em;
							font-weight: 400;
						}
					}
				}
			}

			& > h3 {
				padding-top: var(--space-xs);
				border-top: 1px solid var(--color-neutral-8);
			}

			& > .skills {
				list-style: none;
				display: flex;
				gap: var(--space-xs);
				flex-wrap: wrap;

				& > li {
					background: var(--color-neutral-9);
					padding: var(--space-3xs) var(--space-xs);
					border-radius: 1em;
					font-size: var(--font-size--1);
				}
			}
		}
	}
}