.hero-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 88px var(--layout-padding) 0;
	text-align: center;
	
	header {
		margin-top: -9px;
	}
	
	.tagline {
		margin: -5px;
		margin-bottom: -1px;
		padding-bottom: 1px; /* otherwise the bottom of the g is clipped */
		font: 900 clamp(32px, 8.627vw, 49px)/1.25 var(--font-family-satoshi);
		letter-spacing: -0.92px;
		background: linear-gradient(var(--color-some-purple) 33%, #8c60f3 75%);
		background-clip: text;
		color: transparent;
		
		@media (prefers-color-scheme: dark) {
			background-image: linear-gradient(
				var(--color-some-purple) 33%,
				#9e5fff 75%
			);
		}
	}
	
	h1 {
		margin: 0;
		font: 900 142px/1.25 var(--font-family-satoshi);
		letter-spacing: -2.46px;
		background: linear-gradient(var(--text-color-base) 27%, #433f4c 80%);
		background-clip: text;
		color: transparent;
		
		@media (width < 1024px) {
			font-size: min(25vw, 142px);
		}
		
		@media (prefers-color-scheme: dark) {
			background-image: linear-gradient(
				white 12.5%,
				#ffffffe5 87.5%
			);
		}
	}
	
	.pitch {
		margin: 28px auto 41px;
		font: var(--font-block-text);
		letter-spacing: -0.28px;
		text-wrap: balance;
		max-width: 600px;
	}
	
	.subtitle {
		margin: 23px 0;
		font: var(--font-subtitle);
		letter-spacing: var(--fontspacing-subtitle);
		opacity: 50%;
	}
}

.in-action-block {
	--in-action-block-top-padding: 100px;
	--in-action-block-control-bar-height: 131px;
	
	position: relative;
	display: flex;
	overflow-x: clip;
	
	@media (width < 1024px) {
		--in-action-block-top-padding: 56px;
		--min-visible-video-height: 10000px; /* disables floating controls */
		
		padding: var(--in-action-block-top-padding) 0 205px;
	}
	
	@media (width >= 1024px) {
		--in-action-block-top-padding: 100px;
		--min-visible-video-height: 180px;
		
		padding: var(--in-action-block-top-padding) 0 310px;
	}
	
	.in-action-video {
		/* These values must be updated when video size changes */
		--border-radius: calc(19% / 13.48) / calc(19% / 9.49);
		--video-intrinsic-height: 1348px;
		
		position: relative;
		display: block;
		margin: auto;
		width: auto;
		height: auto;
		max-height: min(
			var(--video-intrinsic-height),
			100vh - var(--in-action-block-control-bar-height)
		);
		background-color: white;
		background-image: url("videos/hero-poster.webp"); /* dissimulates flash in iOS Safari 17.5.1 */
		background-size: cover;
		border-radius: var(--border-radius);
		box-shadow: 0 0 3px #00000042, 0 10px 68px #00000059;
		
		@media (width < 1024px) {
			max-width: calc(100vw - var(--layout-padding) * 2);
		}
		
		@media (width >= 1024px) {
			max-width: calc(100vw - 116px);
		}
		
		@media (prefers-color-scheme: dark) {
			box-shadow: 0 10px 42px 10px black;
		}
	}
	
	.controls-wrapper {
		position: absolute;
		top: min(
			0px,
			var(--in-action-block-control-bar-height)
			+ var(--in-action-block-top-padding)
			+ var(--min-visible-video-height) /* how much of the video is visible before controls start scrolling in */
			- 100dvh
		);
		z-index: 1;
		
		@media (width < 1024px) {
			bottom: 65px;
		}
		
		@media (width >= 1024px) {
			bottom: 140px;
		}
	}
	
	.controls-sticky {
		position: sticky;
		top: 0;
		height: 100dvh;
		max-height: 100%;
	}
	
	.control-bar {
		position: absolute;
		bottom: 0;
		width: 100vw;
		height: var(--in-action-block-control-bar-height);
		background: linear-gradient(transparent 27px, var(--block-background));
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		mask-image: linear-gradient(#00000000, #00000082 8.25%, #000000DE 22.96%, #000000FF 35.88%);
		
		@media (width < 559px) { /* see in-action-control-bar-full-width */
			justify-content: flex-start;
			padding: 0 20px;
		}
		
		@media (width >= 1024px) {
			padding-top: 32px;
		}
		
		@media (prefers-color-scheme: dark) {
			background-image: linear-gradient(#16161700, rgba(22, 22, 23, 0.32) 12.19%, rgba(22, 22, 23, 0.47) 21.43%, rgba(22, 22, 23, 0.56) 26.47%, rgba(22, 22, 23, 0.65) 33.19%, rgba(22, 22, 23, 0.8) 47.06%, rgba(22, 22, 23, 0.898) 62.61%, #161617)
		}
		
		.toggle-play-button {
			flex-shrink: 0;
			color: var(--text-color-base);
			cursor: pointer;
			
			@media (width < 1024px) {
				padding: 0 6px 0 3px;
				margin-right: 2px;
			}
			
			@media (width >= 1024px) {
				margin-right: 15px;
				padding: 0;
			}
			
			&:not(.show-play) {
				.play-image {
					display: none;
				}
			}
			
			&.show-play {
				.pause-image {
					display: none;
				}
			}
		}
	}
}

.statement-block {
	.block-header {
		margin-bottom: 0;
	}
	
	/* Like .block-narrow, but offset one column to the right */
	@media (width >= 1024px) {
		grid-template-columns: repeat(3, 1fr) [content-start] repeat(8, 1fr) [content-end] repeat(1, 1fr);
		--content-column-count: 8;
		
		.block-header {
			grid-column-end: content-end;
		}
	}
}

.accolades-block {
	.block-header {
		padding-right: 0;
		
		text-align: center;
		
		.header-icon {
			margin: auto;
			
			color: var(--color-git-red);
		}
	}
	
	.accolades {
		display: flex;
		
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		column-gap: 70px;
		row-gap: 33px;
		
		.accolade {
			display: flex;
			
			max-width: 350px;
			
			&.regular-only {
				@media (width < 1024px) {
					display: none;
				}
			}
			
			a {
				text-decoration: none;
				color: inherit;
			}
			
			blockquote {
				position: relative;
				
				margin: 17px 0;
				
				font: var(--font-body-text);
				letter-spacing: var(--fontspacing-body-text);
				
				background-color: white;
				background-clip: content-box;
				border: 28px solid white;
				border-top-width: 18px;
				border-bottom-width: 18px;
				border-radius: 10px;
				
				@media (prefers-color-scheme: dark) {
					background-color: #ffffff15;
					border-color: #ffffff15;
				}
				
				&:before {
					content: "“";
					
					position: absolute;
					right: 100%;
					
					font-weight: bold;
				}
				
				&:after {
					content: "”";
					
					font-weight: bold;
				}
			}
			
			.accolade-author {
				display: flex;
				
				align-items: center;
				gap: 15px;
				
				font: var(--font-subtitle);
				letter-spacing: var(--fontspacing-subtitle);
				
				.picture {
					height: 43px;
					
					overflow: hidden;
					border-radius: 50%;
				}
				
				.accolade-author-details {
					display: flex;
					
					flex-direction: column;
					
					opacity: 0.8;
					
					.author {
						font-weight: bold;
					}
					
					.title {
						font-style: italic;
					}
				}
				
				a:hover & {
					text-decoration: underline;
				}
			}
		}
	}
}

.reword-block {
	.reword-block-column {
		grid-column-start: auto;
		grid-column-end: span 4;
		font: var(--font-body-text);
		letter-spacing: var(--fontspacing-body-text);
		
		h3 {
			display: flex;
			align-items: flex-end;
			text-wrap: balance;
			
			@media (1024px <= width < 1260px) {
				max-width: 275px;
				height: calc(2em * 1.24); /* 2 times the line-height */
			}
		}
		
		.step-list {
			list-style: none;
			counter-reset: step;
			padding: 0 24px 0 0;
			
			> li {
				counter-increment: step;
				position: relative;
				
				@media (width < 1024px) {
					margin: 15px 0;
					padding-left: 45px;
				}
				
				@media (width >= 1024px) {
					margin: 24px 0;
					padding-left: 51px;
				}
				
				&::before {
					position: absolute;
					top: 0;
					content: counter(step);
					background: var(--text-color-base);
					border-radius: 100%;
					font: var(--font-body-bullet);
					letter-spacing: var(--fontspacing-body-bullet);
					color: var(--text-color-dark-bg);
					text-align: center;
				}
				
				@media (width < 1024px) {
					&::before {
						left: 5px;
						width: 26px;
						height: 26px;
						line-height: 25px;
					}
				}
				
				@media (width >= 1024px) {
					&::before {
						left: 6px;
						width: 28px;
						height: 28px;
						line-height: 28px;
					}
				}
				
				@media (prefers-color-scheme: dark) {
					&::before {
						text-shadow: 0px 0px 4px #00000070; /* increase-purple-platter-contrast: increase contrast because purple is too bright */
					}
				}
			}
			
			@media (width < 1024px) {
				padding-right: 0;
			}
		}
		
		&.using-retcon .step-list > li::before {
			background: var(--bg-bullet-1);
		}
		
		&.using-gui .step-list > li::before {
			background: var(--bg-bullet-2);
		}
		
		&.using-cli .step-list > li::before {
			background: var(--bg-bullet-3);
		}
		
		.conclusion {
			margin-top: 34px;
			color: var(--text-color-deemphasized);
			
			@media (width < 1024px) {
				margin-top: 23px;
			}
			
			@media (width >= 1024px) {
				margin-top: 34px;
			}
		}
		
		@media (width < 1024px) {
			grid-column-end: span 12;
		}
	}
}

.cheatsheet-block {
	position: relative;
	
	@media (width < 1024px) {
		overflow: hidden;
		
		&.expanded {
			overflow: visible
		}
	}
	
	.table-wrapper {
		display: contents;
		
		@media (width < 1024px) {
			position: relative;
			display: block;
			height: 950px;
			
			&::after {
				content: "";
				position: absolute;
				inset: auto calc(0px - var(--effective-block-padding)) 0;
				height: 140px;
				background: linear-gradient(
					180deg,
					color-mix(in srgb, var(--block-background) 00%, transparent) 0%,
					color-mix(in srgb, var(--block-background) 52%, transparent) 28%,
					color-mix(in srgb, var(--block-background) 79%, transparent) 51%,
					color-mix(in srgb, var(--block-background) 92%, transparent) 80%,
					var(--block-background) 100%
				);
				pointer-events: none;
				z-index: 1;
			}
			
			.cheatsheet-block.expanded & {
				height: auto;
				padding-bottom: 49px;
				
				&::after {
					display: none;
				}
			}
		}
	}
	
	.button-wrapper {
		position: sticky;
		bottom: 30px;
		z-index: 2;
		
		button { /* TODO Refactor with .coolletter-block input[type="submit"] */
			display: block;
			width: fit-content;
			border: none;
			margin: 27px auto 0;
			padding: 8px 15px 9px 17px;
			background: var(--bg-button);
			color: var(--text-color-dark-bg);
			font: var(--font-button);
			letter-spacing: var(--fontspacing-button);
			cursor: pointer;
		}
		
		@media (width > 1024px) {
			display: none;
		}
	}
	
	.cheatsheet-table {
		display: grid;
		grid-column: 1/-1;
		grid-template-columns: subgrid;
		font: var(--font-body-text);
		letter-spacing: var(--fontspacing-body-text);
		
		thead, tbody {
			display: contents;
		}
		
		thead {
			tr {
				@media (width >= 1024px) {
					position: sticky;
					top: 0;
					padding-top: 9px;
					margin-top: -9px;
					background-color: var(--block-background);
					box-shadow: 0 9px 20px color-mix(in srgb, var(--block-background) 75%, transparent);
				}
			}
			
			th {
				font: var(--font-body-title);
				letter-spacing: var(--fontspacing-body-title);
				padding-right: 0;
			}
		}
		
		tr {
			display: grid;
			grid-column: 1/-1;
			grid-template-columns: subgrid;
		}
		
		thead tr, tbody tr:not(:last-of-type) {
			@media (width >= 1024px) {
				border-bottom: solid 1px var(--border-color);
			}
		}
		
		th, td {
			display: block;
			grid-column: span 4;
			padding: 11px 20px 20px 0;
			text-align: left;
			
			br {
				margin-bottom: 13px;
			}
		}
		
		th {
			font: var(--font-body-inline-title);
			letter-spacing: var(--fontspacing-body-inline-title);
		}
		
		.header-compact {
			border-top: solid 1px var(--border-color);
			padding: 24px 0 19px;
			
			&:first-of-type {
				border-top: none;
			}
			
			th {
				grid-column: content-start/content-end;
				padding: 0;
				margin-left: -1px;
				text-wrap: balance;
				font: var(--font-body-title);
				letter-spacing: var(--fontspacing-body-title);
			}
			
			@media (width >= 1024px) {
				display: none;
			}
		}
		
		@media (width < 1024px) {
			.header-regular {
				display: none;
			}
			
			.cheatsheet-row {
				display: block;
				margin: 0 calc(-1 * var(--effective-block-padding));
				padding-bottom: 27px;
				padding-left: var(--effective-block-padding);
				overflow-x: auto;
				text-wrap: nowrap;
				
				th {
					display: none;
				}
				
				td {
					position: relative;
					padding: 44px 0 0;
					display: inline-block;
					text-wrap: auto;
					vertical-align: top;
					
					&::before {
						content: "•";
						position: absolute;
						top: 0;
						left: -7px;
						font: var(--font-body-bullet);
						font-size: 40px;
						line-height: 20px;
					}
					
					&::after {
						position: absolute;
						top: 0;
						left: 22px;
						font: 900 var(--fontsize-body-text)/1.421 var(--font-family-manrope);
						letter-spacing: -0.08px;
					}
					
					&:nth-of-type(1) {
						width: min(var(--legible-width-body), 100vw - var(--layout-padding) - 40px);
						
						&::before {
							color: var(--color-some-purple);
						}
						
						&::after {
							content: 'Using Retcon';
						}
					}
					
					&:nth-of-type(2) {
						--width: min(var(--legible-width-body), 100vw - var(--layout-padding) * 2);
						width: var(--width);
						margin-right: calc(100vw - var(--width) - var(--effective-block-padding)); /* allows scrolling this row right to the left edge of the block */
						
						&::before {
							color: var(--color-git-red);
						}
						
						&::after {
							content: 'Using the Git CLI';
						}
					}
				}
			}
		}
	}
	
	@media (width < 1024px) {
		padding-bottom: 0;
	}
}

.conflict-resolution-block {
	overflow: hidden;
	padding-left: var(--layout-padding);
	padding-right: var(--layout-padding);
	
	.conflict-resolution-pictures {
		--focus-x: 0px; /* Set by script */
		--focus-y: 0px; /* Set by script */
		
		position: relative;
		grid-column: content-start/content-end;
		max-width: 100%;
		
		@media (width < 1024px) {
			margin: 15px auto 55px;
		}
		
		@media (width >= 1024px) {
			margin: 68px auto 117px;
		}
		
		.conflict-resolution-picture {
			/* These values must be updated when image size changes */
			--border-radius: calc(19% / 12.72) / calc(19% / 8.45);
			--image-intrinsic-height: 845px;
			
			display: block;
			border-radius: var(--border-radius);
			
			.conflict-resolution-image {
				display: block;
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: min(
					var(--image-intrinsic-height), /* don't overshoot natural size */
					100vh - 150px /* allow some space for the control bar */
				);
				border-radius: var(--border-radius);
			}
			
			&.brightened {
				position: relative;
				box-shadow: 0 0 3px #00000042, 0 10px 68px #00000059;
				/* clip-path is set by script */
				
				@media (prefers-color-scheme: dark) {
					box-shadow:
						0 10px 42px 10px black;
					
					&::after {
						content: "";
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						display: block;
						border-radius: var(--border-radius);
						box-shadow: inset 0 0 0 1px #545454;
						pointer-events: none;
					}
				}
			}
			
			&.dimmed {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				
				transition: ease-out opacity .3s;
				
				&::after {
					content: "";
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					display: block;
					border-radius: var(--border-radius);
					background: radial-gradient(circle 1000px at var(--focus-x) var(--focus-y), #00000044, #00000076);
					pointer-events: none;
				}
				
				@media (prefers-color-scheme: dark) {
					&::after {
						background: radial-gradient(circle 1000px at var(--focus-x) var(--focus-y), #0000006c, #000000a0);
						box-shadow: inset 0 0 0 1px #3a3a3a;
					}
				}
			}
		}
		
		.frame {
			--rim-shadow-color: #0000002b;
			
			position: absolute;
			
			/* Position and size are set by script */
			top: 0;
			left: 0;
			width: 0;
			height: 0;
			
			transition:
				ease-out opacity .3s,
				ease-out filter .3s;
			
			pointer-events: none;
			
			&:before {
				content: "";
				display: block;
				position: absolute;
				
				/* effectively draw box shadow *around* rather than *within* */
				top: -9px;
				right: -9px;
				bottom: -9px;
				left: -9px;
				
				border-radius: 16px;
				box-shadow:
					0 1px 6px 0 #0000007a, inset 0 0 0 1px var(--rim-shadow-color),
					inset 0 0 0 8px var(--color-some-purple),
					inset 0 0 0 9px var(--rim-shadow-color),
					inset 0 0 0 9px var(--color-some-purple);
			}
			
			@media (prefers-color-scheme: dark) {
				--rim-shadow-color: #ffffff28;
			}
		}
		
		&:not(.show-highlight) {
			.conflict-resolution-picture.dimmed {
				opacity: 0;
				transition-duration: .5s;
			}
			
			.frame {
				opacity: 0;
				filter: blur(15px);
				transition-duration: .5s;
			}
		}
	}
	
	.control-bar {
		grid-column: content-start/content-end;
		
		@media (width < 1024px) {  /* see conflict-resolution-control-bar-full-width */
			justify-content: flex-start;
			padding: 0 var(--layout-padding) 15px;
			width: 100vw;
			margin: 0 calc(0px - var(--layout-padding));
		}
		
		@media (1024px <= width < 1200px) {
			max-width: 750px;
			margin:	auto;
		}
		
		@media (width >= 1024px) {
			flex-wrap: wrap;
		}
		
		.control-button {
			text-wrap: nowrap;
			padding-left: 17px;
			padding-right: 17px;
			
			transition-duration: 0s !important;
			
			&.current {
				background: var(--bg-button);
				color: var(--text-color-dark-bg);
				
				@media (prefers-color-scheme: dark) {
					text-shadow: 0px 0px 15px #00000070; /* increase-purple-platter-contrast: increase contrast because purple is too bright */
				}
			}
		}
	}
	
	.chapter-blocks {
		grid-column: content-start/content-end;
		max-width: var(--legible-width-body);
		font: var(--font-body-text);
		letter-spacing: var(--fontspacing-body-text);
		
		@media (width < 1024px) {
			margin: 15px 0 5px;
		}
		
		@media (width >= 1024px) {
			margin: 21px auto 0;
			text-align: center;
		}
		
		.chapter-text {
			margin: 0;
			
			&:not(.current) {
				display: none;
			}
		}
	}
	
	@media (width >= 1024px) {
		.block-header {
			text-align: center;
			
			.header-icon {
				margin: auto;
			}
			
			p {
				margin-left: auto;
				margin-right: auto;
			}
		}
	}
}

.coolletter-block {
	.block-header {
		> p {
			grid-column: content-start/9;
		}
	}
	
	.beta-form {
		display: grid;
		grid-template-columns: subgrid;
		grid-template-rows: subgrid;
	}
	
	fieldset {
		grid-column: content;
		border: none;
		margin: 0;
		padding: 0;
		
		@media (width < 495px) {
			display: flex;
			flex-direction: column;
			gap: 15px;
		}
		
		@media (495px <= width < 1024px) {
			display: flex;
			flex-direction: row;
			gap: 24px;
			max-width: 564px;
		}
		
		@media (width >= 1024px) {
			/* Chrome 120 can't seem to respect the doubly-nested subgrid, so let's replicate the sizes with a flex */
			display: flex;
			gap: 3.3%;
			max-width: 690px;
		}
	}
	
	input {
		padding: 13px 21px;
		border-radius: 13px;
		font: var(--font-body-text);
		letter-spacing: var(--fontspacing-body-text);
		transition: none;
		appearance: none;
		
		&:focus-visible {
			outline: none;
			box-shadow: 0 0 0 3px rgba(129, 93, 248, 0.649);
			transition: ease-out box-shadow .21s;
		}
		
		&:disabled {
			background: transparent;
			color: var(--text-color-deemphasized);
			border: solid 1px var(--text-color-deemphasized);
			opacity: 0.45;
		}
	}
	
	input[type="email"] {
		color: var(--text-color-base);
		border: solid 1px #00000031;
		background: var(--bg-field);
		background-clip: padding-box;
		
		&::placeholder {
			color: var(--text-color-deemphasized);
		}
		
		&:disabled {
			background: transparent;
			color: var(--text-color-deemphasized);
			border-color: var(--text-color-deemphasized);
			opacity: 0.45;
		}
		
		@media (width < 1024px) {
			flex: 1;
		}
		
		@media (width >= 1024px) {
			flex-grow: 1;
		}
		
		@media (prefers-color-scheme: dark) {
			border-color: transparent;
		}
	}
	
	input[type="submit"] {
		border: solid 1px #6437ca;
		background: var(--bg-button);
		color: var(--text-color-dark-bg);
		font: var(--font-button);
		letter-spacing: var(--fontspacing-button);
		cursor: pointer;
		
		&:active {
			filter: brightness(0.8) saturate(0.9) hue-rotate(2deg) contrast(1.5);
		}
		
		&:disabled {
			color: var(--text-color-deemphasized);
			border: solid 1px var(--text-color-deemphasized);
			background: transparent;
			opacity: 0.45;
		}
		
		@media (width >= 1024px) {
			width: 26%;
		}
		
		@media (prefers-color-scheme: dark) {
			border-color: transparent;
		}
	}
	
	.message {
		display: block;
		margin: 0;
		font: var(--font-subtitle);
		letter-spacing: var(--fontspacing-subtitle);
		
		&.error {
			color: red;
			padding-top: 27px;
		}
	}
}

.grabbag-block {
	.grabbag-highlights {
		display: grid;
		grid-column: content-start/content-end;
		grid-template-columns: subgrid;
		grid-row-gap: 38px;
		margin: 9px 0 33px;
		font: var(--font-body-text);
		letter-spacing: var(--fontspacing-body-text);
		line-height: 1.632;
		
		.highlight {
			@media (width < 768px) {
				grid-column: span var(--content-column-count);
				position: relative;
				padding-left: 58px;
				
				br {
					display: none;
				}
			}
			
			@media (width >= 768px) {
				grid-column: span calc(var(--content-column-count) / 2);
				padding-right: 24px;
			}
		}
		
		.highlight-icon {
			display: block;
			
			margin-bottom: 18px;
			
			@media (width < 768px) {
				position: absolute;
				top: 4px;
				left: 0;
			}
		}
		
		dt, dd {
			display: inline;
		}
		
		dd {
			margin-left: 0px;
		}
		
		dfn {
			font-weight: 700;
			font-style: normal;
		}
	}
	
	ul.grabbags-misc {
		
		
		@media (width < 1024px) {
			--bottom-opacity: 36%;
		}
		
		@media (width >= 1024px) {
			--bottom-opacity: 15%;
		}
		
		grid-column: content-start/content-end;
		list-style: none;
		margin-top: 34px;
		padding-left: 0;
		font: var(--font-body-text);
		list-style: var(--fontspacing-body-text);
		line-height: 2.316;
		text-align: justify;
		background: linear-gradient(to bottom, var(--text-color-base), color-mix(in srgb, var(--text-color-base) var(--bottom-opacity), transparent));
		background-clip: text;
		color: transparent;
		
		li {
			display: inline;
			
			&::before {
				content: " • ";
				display: inline;
			}
			
			&:first-child:before {
				display: none;
			}
		}
		
		@media (width < 1024px ) {
			font-size: 15px;
			line-height: 2.1;
		}
	}
}

.antihero-block {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: clamp(min-content, 100vh - 77px * 1.8, 746px); /* footer is roughly 77px height */
	text-align: center;
	
	.small-screenshot {
		display: flex; /* to eliminate whitespace at the bottom */
		position: relative;
		margin-bottom: 40px;
		max-width: 100%;
		justify-content: center;
		
		overflow: hidden;
		border-radius: 16px;
		
		@media (prefers-color-scheme: dark) {
			&::after {
				content: "";
				position: absolute;
				inset: 0;
				border-radius: inherit;
				box-shadow: 0 0 0 1px inset #ffd2c014;
			}
		}
	}
	
	p {
		max-width: 600px;
		margin: 0;
		font: var(--font-block-text);
		letter-spacing: var(--fontspacing-block-text);
		text-wrap: balance;
	}
	
	.buttons {
		display: flex;
		margin-top: 32px;
		
		@media (width < 1024px) {
			gap: 20px;
			flex-wrap: wrap;
			justify-content: stretch;
			
			& > * {
				flex-grow: 1;
				justify-content: center;
			}
		}
		
		@media (width >= 1024px) {
			gap: 43px;
		}
	}
}