.likedFontsPage {
	--max-width: auto;
	--main-margin: 20px;
	--root-margin: 20px;
	--text: #fb7435;

	
	background-size: 100%;
	background-repeat: repeat;
	background-position: top center;
	
	--panel: var(--background);
	--panel-text: var(--text);
}

.likedFontsPage #panel .menu, .likedFontsPage #panel .subsection, .likedFontsPage #panel nav a {
	outline: 1px solid var(--link);
}

.likedFontsPage .intro {
	margin: 0 0 60px;
}

.likedFontsPage main p {
	font-size: var(--medium-text-size);
	letter-spacing: -0.03em;
	line-height: 1.4em;
	font-weight: 700;
	margin: 40px 0;
	max-width: 810px;
}

.sampleGallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	justify-content: space-between;
	grid-gap: 25px 35px;
	margin: 0 0 70px;
}

.sampleGallery a {
	display: inline-block;
	color: inherit;
	box-sizing: border-box;
	border: 1px solid transparent;
}

.sampleGallery a .sample {
	width: 100%;
	fill: rgb(255, 203, 61);
}

.sampleGallery a .caption {
	display: inline-block;
	font-size: var(--tiny-text-size);
	font-weight: bold;
	margin: 0 0 2px;
}

.sampleGallery a:hover { 
	color: var(--link);
	border: 1px solid var(--link);
}

@media screen and (max-width: 650px) {
	.likedFontsPage .intro {
		margin: 0 0 25px;
		height: auto;
	}
	
	.sampleGallery {
		grid-template-columns: 100%;
		grid-gap: 15px;
		margin: 0;

	}
}