.features {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-sm);
	align-items: flex-start;
	border: 1px solid transparent;

	@media (min-width: 768px) {
		gap: var(--s-lg);
	}

	> img {
		width: 100%;
		object-fit: cover;
		border-top-left-radius: var(--s-lg);
		border-bottom-right-radius: var(--s-lg);

		@media (max-width: 767px) {
			max-height: 35vh;
		}

		@media (min-width: 768px) {
			position: sticky;
			top: var(--s-md);
			order: 2;
			width: calc(50% - var(--s-md));
			max-height: 90vh;
			aspect-ratio: 3 / 4;
		}
	}

	> header {
		width: 100%;

		@media (min-width: 768px) {
			width: calc(50% - var(--s-md));
			margin-top: var(--s-md);
		}

		> ul {
			margin-top: var(--s-sm);

			@media (min-width: 1600px) {
				margin-top: var(--s-md);
			}

			> li {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: var(--s-xs);

				&:not(:first-child) {
					margin-top: var(--s-sm);

					@media (min-width: 1600px) {
						margin-top: calc(1.5 * var(--s-sm));
					}
				}

				> h3 {
					padding: 0 var(--s-xs) 0 var(--s);
				}
			}
		}

		> nav {
			margin-top: var(--s-md);
		}
	}
}