.atlas-style-font {
	margin-right: $space-md-atlas;

	&__caption {
		border-top: 1px solid $atlas-color-divider;
		display: flex;
		font-family: $font-mono-atlas;
		font-size: $atlas-scale-mono-small;
		margin-top: $space-sm-atlas;
		padding-top: $space-sm-atlas;
	}

	&__name {
		margin-bottom: $space-sm-atlas;
		margin-right: $space-sm-atlas;
		white-space: nowrap;

		&::after {
			content: ":";
		}
	}

	&__example {
		&._logo {
			font-size: 64px;
			line-height: 1;

			&::before {
				content: "Aa";
			}
		}

		&._characters {
			overflow: hidden;
			white-space: nowrap;

			&::before {
				content: "a b c d e f g h i j k l m n o p q r s t u v w x y z";
			}
		}

		&._characters-capital {
			overflow: hidden;
			white-space: nowrap;

			&::before {
				content: "A B C D E F G H I J K L M N O P Q R S T U V W X Y Z";
			}
		}

		&._digits {
			&::before {
				content: "1 2 3 4 5 6 7 8 9 0";
			}
		}
	}
}