.jobs {
	width: calc(100% - 4rem);
	max-width: 48rem;
	margin-block: 6rem;
	margin-inline: auto;
	padding-bottom: 4rem;
	border-bottom: 6px solid oklch(var(--theme-accent));

	@media screen and (max-width: 767px) {
		margin-block: 0rem;
	}

	h2 {
		margin-bottom: 4rem;
		border-bottom: 6px solid oklch(var(--theme-accent));
	}

	details {
		summary {
			list-style: none;
			cursor: pointer;

			&:hover {
				color: oklch(var(--theme-accent));
			}
		}

		.summary-action {
			display: flex;
			align-items: center;
			column-gap: 1rem;
			margin-top: 0.5rem;
			padding-left: 1.5rem;

			.icon {
				position: relative;
				display: inline-block;
				width: 2.5rem;
				height: 2.5rem;

				&::before,
				&::after {
					content: "";
					position: absolute;
					top: 50%;
					left: 50%;
					width: 100%;
					height: 4px;
					background-color: oklch(var(--theme-accent));
					transform-origin: center;
				}
			}
		}

		.summary-action-open {
			.icon {
				&::before {
					transform: translate(-50%, -50%);
				}

				&::after {
					transform: translate(-50%, -50%) rotate(90deg);
				}
			}
		}

		.summary-action-close {
			display: none;

			.icon {
				&::before {
					transform: translate(-50%, -50%) rotate(45deg);
				}

				&::after {
					transform: translate(-50%, -50%) rotate(-45deg);
				}
			}
		}

		&[open] {
			.summary-action-open {
				display: none;
			}

			.summary-action-close {
				display: flex;
			}
		}

		& + details {
			border-top: 1px solid oklch(var(--theme-dark));
			padding-top: 4rem;
			margin-top: 4rem;

			body.dark & {
				border-color: #fff;
			}
		}
	}
}