/**
 * About page styles, from Content: About 331:32845. Tokens only:
 * var(--wp--preset--*) and var(--wp--custom--*).
 */

/* The two story sections (the meeting bot, Where I'm from) sit closer than a
   full section: 64 over 96 on a desktop, as drawn. */
@media (min-width: 960px) {
	.wp-block-group.abhinav-section.abhinav-about-split {
		padding-top: var(--wp--preset--spacing--64);
		padding-bottom: var(--wp--preset--spacing--96);
	}
}

/* Where I'm from: the Junnar photo over the RC car. */
.abhinav-about-pictures > .wp-block-image {
	margin-bottom: 0;
}

.abhinav-about-pictures img {
	display: block;
	width: 100%;
	height: auto;
}

/* Five turning points: the ridge with a marker for each stop. */
.abhinav-about-ridge {
	margin-bottom: 0;
}

.abhinav-about-ridge img {
	display: block;
	width: 100%;
	height: auto;
}

.abhinav-ridge-stops > *,
.abhinav-ridge-stop > * {
	margin: 0;
}

/* On a desktop the stops line up under the markers: the ridge is 1248 wide,
   the first marker's dot starts 72 in, and each stop is 216 wide with 24
   between. In fractions of the width, so the columns keep to the markers as
   the ridge scales (the gap is a fraction of the grid's own 1176). */
@media (min-width: 960px) {
	.wp-block-group.abhinav-ridge-stops {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		column-gap: calc(100% * 24 / 1176);
		padding-left: calc(100% * 72 / 1248);
	}
}

/* Work with me: the portrait and the invitation. */
.wp-block-group.abhinav-invite {
	padding-bottom: var(--wp--preset--spacing--96);
}

@media (min-width: 960px) {
	.wp-block-group.abhinav-invite {
		padding-top: var(--wp--preset--spacing--32);
		padding-bottom: var(--wp--preset--spacing--128);
	}
}