section {
	padding: 1rem 0;
	color: black;

	&.vermont {
		font-size: 1.5rem;
		line-height: 1.75rem;
		background: hsl(0 0 0 / 10%);
		padding-block: 3rem;

		@media (prefers-color-scheme: dark) {
			background: hsl(0 0 100% / 0.125);
		}

		.container {
			display: flex;
			align-items: center;
			gap: 2rem;
			flex-direction: column;

			@media (min-width: 768px) {
				flex-direction: row;
			}
		}

		img {
			max-height: 200px;
		}
	}
}

.hero {
	display: flex;
	justify-content: space-between;
	align-items: center;

	h2 {
		margin-bottom: 0;
	}

	a.button {
		white-space: nowrap;
		background: dodgerblue;
		color: white;
		text-decoration: none;
		padding: 0.5em 1em;
		border-radius: 0.5em;

		&:hover {
			color: white;
			background: black;

			@media (prefers-color-scheme: dark) {
				color: black;
				background: white;
			}
		}
	}
}

.work figure img {
	display: block;
	margin-inline: auto;
}